Collapsible Alert

Collapsible Alert combines an Alert-style container with a collapsible content section. Use it when the callout itself needs to stay visible while optional detail can be expanded.

Use Collapsible Alert when the disclosure is itself a callout. It owns the alert styling, padding, trigger treatment, and toggle button. Use Collapsible instead when you only need generic reveal and hide behaviour and the surrounding layout is not an alert.

For non-expandable product callouts, use Admonition. Use the low-level Alert primitive only when a wrapper or bespoke composition needs direct control over the alert structure.

import { CollapsibleAlert } from 'ui-patterns/collapsible-alert'
 
export function CollapsibleAlertDemo() {
  return (
    <CollapsibleAlert trigger="Need help?">
      <p className="text-sm text-foreground-light">
        Try a different browser or disable extensions that block network requests.
      </p>
    </CollapsibleAlert>
  )
}

Usage

import { CollapsibleAlert } from 'ui-patterns/collapsible-alert'

<CollapsibleAlert trigger="Need help?">
  <p>Content revealed when expanded.</p>
</CollapsibleAlert>

Default open

<CollapsibleAlert trigger="Details" defaultOpen>
  <p>This section is expanded by default.</p>
</CollapsibleAlert>

Variants

Supports the same variant prop as Alert: default, destructive, and warning.

<CollapsibleAlert trigger="Warning" variant="warning">
  <p>Something needs attention.</p>
</CollapsibleAlert>