Notice
import { Notice } from '@tangible/ui';
Interactive docs and examples: Notice in Storybook.
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).
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