Components
InlineNotice
Compact single-row inline message with a tone icon, lighter than Alert.
InlineNotice is a lightweight one-line message for forms and settings panels —
quieter than Alert, with just a tone-coloured icon and text and no border or
fill. Set tone to 'info' (default), 'success', 'warning', 'danger', or
'neutral'; add a trailing action, or make it dismissible with an
onDismiss handler.
Example
Preview
Changes apply to all workspace members.
Saved 2 seconds ago.
You have unsaved changes.
Sync failed.
import { InlineNotice } from '@officina/ui';
<InlineNotice tone="info">Changes are saved automatically.</InlineNotice>
<InlineNotice tone="warning" dismissible onDismiss={hide}>
Your trial ends in 3 days.
</InlineNotice>API
| Prop | Type | Default | Description |
|---|---|---|---|
| action | ReactNode | — | Trailing action node (e.g. a small Button or Link). |
| dismissible | boolean | — | Show a dismiss button. |
| icon | ReactNode | — | Leading icon override; falls back to a tone-based default. |
| onDismiss | () => void | — | Called when the dismiss button is clicked. |
| tone | enum | info | Semantic tone driving color and default icon. Defaults to `'info'`. |