Alert Collapsible

An alert-styled block with a collapsible content section, toggled by an icon button.

Need help?

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

Usage

import { AlertCollapsible } from 'ui'

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

Default open

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

Variants

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

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

PreviousCheckbox

NextCombobox