Components/Feedback/Alert

Alert

Feedback

Inline status message with icon, title, body, and dismiss button.

In-page status message with a semantic icon determined by tone. Supports solid and subtle variants. Optional dismiss callback and action slot for a CTA button.

Usage

import { Alert } from "nosible-ux"

export default function Example() {
  return (
    <Alert
      tone="success"
      variant="subtle"
      title="Signals exported"
      description="1,240 signals have been exported as CSV."
    />
  )
}

Examples

All tones

Scan in progress

Estimated completion in 2 minutes.

Watchlist updated

47 new signals added.

Low confidence signals

14 signals fall below your threshold.

Feed error

Reuters RSS feed returned 503. Retrying.

Solid with dismiss and action

New data sources available

3 new SEC filing feeds have been added.

Accessibility

role="alert" so screen readers announce the content when it appears. Dismiss button has aria-label="Dismiss". The icon is aria-hidden.

Props

Name	Type	Default	Description
`action`	`ReactNode`	—	Optional action element (typically `<Button intent="ghost">`).
`description`	`ReactNode`	—	Alert body copy.
`onDismiss`	`(() => void) \| undefined`	—	When provided, renders a trailing × dismiss button.
`title`	`ReactNode`	—	Alert heading — omit to make description the primary text.
`tone`	`Tone \| undefined`	—	Semantic tone. Controls icon, colour, and left-stripe. Default: `"info"`.
`variant`	`AlertVariant \| undefined`	—	Visual style. `"solid"` fills the surface; `"subtle"` uses a left stripe. Default: `"solid"`.

← All Components Getting Started →