Alert

VariantsCopy Anchor Link

soft (default), outlined, and solid. Each variant keeps the same semantic tone while changing how much surface fill the message gets.

UsageCopy Anchor Link

import { Alert } from '@cajon-ui/react';

<Alert heading="Info">A sync is in progress.</Alert>
<Alert tone="success" variant="outlined">
  Changes were published successfully.
</Alert>
<Alert heading="Warning" tone="warning" variant="solid">
  Budget threshold exceeded.
</Alert>

DismissingCopy Anchor Link

Pass onDismiss to render a close control. Without it no control appears, so an alert the user must not be able to silence stays unsilenceable — dismissal is opt-in rather than something to remember to turn off.

The alert does not remove itself. onDismiss fires and the caller decides what happens, because the condition that raised the alert usually lives in the caller's state and clearing the banner without clearing that state would leave the two disagreeing.

Set dismissLabel whenever more than one alert can be on screen. Several buttons all named "Dismiss" leave a screen-reader user distinguishing them by position alone.

<Alert
  tone="error"
  heading="Could not update Bar"
  onDismiss={clearError}
  dismissLabel="Dismiss Bar update error"
>
  {message}
</Alert>

Only a dismissible alert reserves space for the control and becomes a positioning context, so adding this prop to the component changed nothing about how existing alerts lay out.

PropsCopy Anchor Link

All other native <div> attributes pass through; the component forwards its ref and uses role="alert" by default.