Alert / Callout

Inline, persistent message. role="alert" for warning/danger so it's announced; status otherwise.

Import

import { Alert } from '@marbleui/ui'

Props

<Alert>

Prop	Type	Default	Description
title *required	`ReactNode`	`—`
actions	`ReactNode`	`—`	Buttons or links under the text.
children	`ReactNode`	`—`
className	`string`	`—`
onDismiss	`() => void`	`—`
tone	`'info' \| 'success' \| 'warning' \| 'danger'`	`'info'`
variant	`'soft' \| 'outline' \| 'accent'`	`'soft'`

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitive: React Aria Button. Follow the primitive's docs for the full keyboard map.

Usage notes

Inline, persistent message within the page content. For a page-wide announcement use Banner; for transient feedback after an action use toast; for a blocking decision use Dialog.

<Alert tone="warning" title="Your trial ends in 3 days" actions={<Button size="sm">Add card</Button>}>
  Add a payment method to keep your projects.
</Alert>

tone is info (default), success, warning or danger; variant is soft (default), outline or accent.
warning and danger render role="alert" and are announced immediately; info and success use role="status".
Passing onDismiss shows a close button labelled “Dismiss”. You must remove the alert yourself.
title is required; children is the optional body.

Example source · show

import { useState } from 'react'
import { Button } from '../button'
import { Alert } from './alert'

const All = ({ variant }: { variant: 'soft' | 'outline' | 'accent' }) => (
  <div className="flex w-[28rem] flex-col gap-3">
    <Alert variant={variant} tone="info" title="A new version is available">Reload to get the latest features.</Alert>
    <Alert variant={variant} tone="success" title="Domain verified" />
    <Alert variant={variant} tone="warning" title="Your trial ends in 3 days">Add a payment method to keep your projects.</Alert>
    <Alert variant={variant} tone="danger" title="Payment failed">Your card was declined. Update billing to avoid interruption.</Alert>
  </div>
)

function Dismissible() {
  const [open, setOpen] = useState(true)
  return open ? (
    <Alert
      className="w-[28rem]"
      variant="outline"
      tone="warning"
      title="Scheduled maintenance"
      onDismiss={() => setOpen(false)}
      actions={<Button size="sm" variant="outline">View details</Button>}
    >
      The API will be read-only on Sunday from 02:00 to 03:00 UTC.
    </Alert>
  ) : (
    <Button variant="ghost" onPress={() => setOpen(true)}>Show again</Button>
  )
}

export const styles = {
  Soft: () => <All variant="soft" />,
  Outline: () => <All variant="outline" />,
  Accent: () => <All variant="accent" />,
  Dismissible,
}

Source: packages/ui/src/alert/alert.tsx

Catalog

Category: feedback
Priority: Foundation
Primitive: custom