Alert

Contextual feedback banner for info, success, warning, and error states.

stable
since v0.1.0
7.31 kB
feedback
notification
status

Preview

tsx

import { Alert, AlertDescription, AlertTitle } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <Alert status="info">
      <AlertTitle>Heads up</AlertTitle>
      <AlertDescription>This is an informational alert. No action needed.</AlertDescription>
    </Alert>
  );
}

Statuses

Alert ships four statuses — info (default), success, warning, and danger — each with an appropriate icon and colour token.

Preview

Open

tsx

import { Alert, AlertDescription, AlertTitle } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <Alert status="success">
      <AlertTitle>Payment confirmed</AlertTitle>
      <AlertDescription>Your payment was processed successfully.</AlertDescription>
    </Alert>
  );
}

Preview

Open

tsx

import { Alert, AlertDescription, AlertTitle } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <Alert status="warning">
      <AlertTitle>Storage almost full</AlertTitle>
      <AlertDescription>
        You have used 90% of your storage quota. Consider upgrading your plan.
      </AlertDescription>
    </Alert>
  );
}

Preview

Open

tsx

import { Alert, AlertDescription, AlertTitle } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <Alert status="danger">
      <AlertTitle>Something went wrong</AlertTitle>
      <AlertDescription>
        We could not process your request. Please try again later.
      </AlertDescription>
    </Alert>
  );
}

With action

Provide a closable dismiss button or nest a <Button> in the content area for inline actions.

Preview

Open

tsx

import { Alert, AlertDescription, AlertTitle, Button } from '@arshad-shah/cynosure-react';

export default function Example() {
  return (
    <Alert status="warning" closable onClose={() => {}}>
      <AlertTitle>Session expiring</AlertTitle>
      <AlertDescription>Your session will expire in 5 minutes.</AlertDescription>
      <div style={{ marginTop: '0.5rem' }}>
        <Button variant="ghost" size="sm" onClick={() => {}}>
          Extend session
        </Button>
      </div>
    </Alert>
  );
}

API

PropTypeDefaultDescription

status

"info"|"success"|"warning"|"danger"

info

Semantic status that drives colour, default icon, and ARIA role. One of `info`, `success`, `warning`, `danger`, `neutral`.

variant

"solid"|"soft"|"outline"|"ghost"

soft

Visual style. `soft` reads as a tinted surface; `solid` is high-contrast; `outline` is bordered; `ghost` is borderless.

size

"sm"|"md"|"lg"

Controls padding and typographic scale. One of `sm`, `md`, `lg`.

icon

ReactNode

—

Render custom icon; pass `false` to hide the default status icon.

closable

boolean

—

Show a trailing close button that triggers `onClose`.

onClose

(() => void)

—

Invoked when the user activates the close button.

closeLabel

string

Dismiss

Accessible label for the close button.

role

"status"|"alert"|"none"

—

ARIA role. Defaults to `alert` for danger/warning (interruptive) and `status` otherwise. `none` suppresses both.

Accessibility

danger and warning statuses render role="alert" (assertive, interruptive).
info and success render role="status" with aria-live="polite" (non-interruptive).
Set role="none" to suppress live-region behaviour entirely when the alert is not dynamic.
closable renders an <IconButton> whose label is controlled via closeLabel (defaults to "Dismiss").
AlertTitle and AlertDescription are wired via aria-labelledby / aria-describedby automatically through context.

Recipes

Use variant="outline" or variant="solid" for higher-contrast banners in dense UIs.
Pass icon={false} to suppress the default status icon when you have a custom layout.
Wrap multiple alerts in a live region container for toast-style queuing.
Use size="sm" for compact inline feedback inside form fields.