Components / feedback
Alert
Inline message that stays in the page flow.
import { Alert } from '@basiiik/ui';
The snippet an agent gets
From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.
import { Alert } from '@basiiik/ui';
<Alert>Check your card details and try again.</Alert>- Alert has no interactive states. Danger renders role=alert; the other tones render role=status. Omit
titleto hide the title; passonCloseto show the dismiss button. - Storybook: Feedback/Alert.
Props
| Prop | Type | Notes |
|---|---|---|
tone | "danger" | "success" | "warning" | "info" | Default "info" |
emphasis | "subtle" | "solid" | Default "subtle" |
title | ReactNode | |
children | native attribute | |
onClose | () => void | |
icon | ReactNode |
Other props
| Prop | Type | What it does |
|---|---|---|
closeLabel | string | Accessible name of the dismiss button. |
States. Alert has no interactive states. Danger renders role=alert; the other tones render role=status. Omit title to hide the title; pass onClose to show the dismiss button.
Native attributes such as className, id and data-* are forwarded to the root element.
Use it when
- Inline messages tied to page content: info, success, warning, error
Do not use it when
- Transient confirmations (use Toast)
- Blocking decisions (use Modal)
Rules for agents
- Choose tone by meaning: info for neutral news, success after completion, warning for a risk, danger for an error that blocks progress
- Place the Alert next to the content it is about, such as at the top of a form for submit errors
- Danger announces immediately (role="alert"); add an Alert with that tone only in response to something that just happened, not on page load
- Pass onClose only when the message can safely be dismissed; errors that still apply stay until they are fixed
- Keep the tone icon; replace it with icon only for one with the same meaning
- Status tones (success, warning, danger, and info on Alert and Toast) are fixed colours: they never follow the brand colour, so do not restyle them with brand tokens or override the status variables when theming
Avoid
- An Alert for a short confirmation that does not need to stay (use Toast)
- Several Alerts stacked in one place; combine them or fix the cause
- A danger Alert for something that is not an error
- Putting a blocking decision in an Alert (use Modal)
- Relying on the colour alone with a vague text such as "Error"
Writing the content
- The title says what happened: 'Payment failed'
- The body says what to do next: 'Check your card details and try again.'
- Keep it to one or two sentences
- Use sentence case
Keyboard
- Close button reachable by Tab when Show close is on
Accessibility
- role="alert" interrupts assistive tech; use sparingly
- Close button needs aria-label="Dismiss"
Colour tokens it reads
color.bg.danger.defaultcolor.bg.danger.subtlecolor.bg.info.defaultcolor.bg.info.subtlecolor.bg.success.defaultcolor.bg.success.subtlecolor.bg.warning.defaultcolor.bg.warning.subtlecolor.border.dangercolor.border.infocolor.border.successcolor.border.warningcolor.text.dangercolor.text.infocolor.text.on-dangercolor.text.on-infocolor.text.on-successcolor.text.on-warningcolor.text.primarycolor.text.secondarycolor.text.successcolor.text.warningRelated
feedback 8 Figma variants Try it in the live demo