# Notice

```tsx
import { Notice } from '@tangible/ui';
```

Interactive docs and examples: [Notice in Storybook](https://storybook-tangible-ui.pages.dev/?path=/docs/components-notice--docs).

## Notice props

| Prop | Type | Default | Description |
| - | - | - | - |
| `announce?` | `"assertive" \| "off" \| "polite"` | `'off'` | Controls screen-reader announcement behavior. off: no live region; polite: role=status; assertive: role=alert |
| `aria-label?` | `string` | | Accessible name when there is no visible title in Notice.Head. Only use when Notice.Head has no title prop - if both exist, the visible title takes precedence. |
| `as?` | `"div" \| "section"` | `'section'` | |
| `children?` | `React.ReactNode` | | |
| `className?` | `string` | | |
| `disabled?` | `boolean` | | Disable interactions |
| `dismissible?` | `boolean` | | Renders a dismiss button |
| `dismissLabel?` | `string` | `'Dismiss'` | |
| `elevated?` | `boolean` | | Add box shadow |
| `exitAnimation?` | `"collapse" \| "fade" \| "none"` | `'none'` | Exit animation to play when dismissed. none: onDismiss called immediately (default); collapse: fade + height collapse (for inline/block notices); fade: fade out with slight scale (for overlays/toasts) |
| `focusable?` | `boolean` | | If true, the notice container will be focusable (tabIndex=-1). Useful for programmatic focus management in toast/notification systems. Not for keyboard navigation - use interactive + onClick for clickable notices. |
| `inline?` | `boolean` | | Inline layout: icon/title on left, content center, actions right |
| `interactive?` | `boolean` | | Enable hover/focus visual states. If combined with onClick, adds role="button" and keyboard handling (Enter/Space). |
| `onClick?` | `React.MouseEventHandler<HTMLElement>` | | |
| `onDismiss?` | `() => void` | | |
| `ref?` | `React.Ref<NoticeHandle>` | | |
| `size?` | `"lg" \| "md" \| "sm"` | | Scale of padding, internal gap, title typography, and body text. Default 'md' emits no class. |
| `stripe?` | `boolean` | | Show left accent stripe in theme color |
| `style?` | `React.CSSProperties` | | |
| `theme?` | `"danger" \| "info" \| "neutral" \| "success" \| "warning"` | `'info'` | Visual intent |

Also accepts the standard attributes of `HTMLAttributes` (`data-*`, `aria-*`, event handlers), passed to the element it renders.

### Notice.Head

| Prop | Type | Default | Description |
| - | - | - | - |
| `children?` | `React.ReactNode` | | |
| `className?` | `string` | | |
| `icon?` | `React.ReactNode` | | Icon content |
| `title?` | `React.ReactNode` | | Title text |
| `titleAs?` | `"h2" \| "h3" \| "h4" \| "h5" \| "h6"` | `'h3'` | Heading level for title |

Also accepts the standard attributes of `HTMLAttributes` (`data-*`, `aria-*`, event handlers), passed to the element it renders.

### Notice.Body

| Prop | Type | Default | Description |
| - | - | - | - |
| `children?` | `React.ReactNode` | | |
| `className?` | `string` | | |

Also accepts the standard attributes of `HTMLAttributes` (`data-*`, `aria-*`, event handlers), passed to the element it renders.

### Notice.Foot

| Prop | Type | Default | Description |
| - | - | - | - |
| `children?` | `React.ReactNode` | | |
| `className?` | `string` | | |

Also accepts the standard attributes of `HTMLAttributes` (`data-*`, `aria-*`, event handlers), passed to the element it renders.

## Examples

Stories: Basic, With Title, With Icon, Success (Compact), Themes, Sizes, With Stripe (Accent Bar), Inline: Simple, Inline: With Actions, Inline: With Dismiss, Inline: Minimal Style, Stack: With Dismiss, Manual Dismiss: In Head, Announce Polite, Announce Assertive, Exit Animation: Collapse, Exit Animation: Fade, Exit Animation: Imperative API, Example: Locked Content Confirm, Example: Request Unlock, Interactive, Focusable, Disabled, Multi-Paragraph Body ([interactive page](https://storybook-tangible-ui.pages.dev/?path=/docs/components-notice--docs)).

## Component API tokens

Read via fallback, never declared. Set one on an ancestor to restyle every instance under it.

- `--tui-notice-bg`
- `--tui-notice-border`
- `--tui-notice-border-width`
- `--tui-notice-stripe`
- `--tui-notice-stripe-width`
- `--tui-notice-fg`
- `--tui-notice-radius`
- `--tui-notice-padding`
- `--tui-notice-gap`
- `--tui-notice-para-gap`
- `--tui-notice-icon`
- `--tui-notice-title-size`
- `--tui-notice-foot-basis`
- `--tui-notice-dismiss-bg-interact`
- `--tui-notice-dismiss-bg-pressed`

---

Interactive version: https://storybook-tangible-ui.pages.dev/?path=/docs/components-notice--docs