Components

Callout

Persistent guidance that stays close to the setting, state, or workflow it explains.

Persistent context

Use Callout when the information should remain visible without interrupting the current task. Actions stay compact and secondary.

Mirror pausedAuthentication expired for this repository.

tsx

<Callout
  title="Mirror paused"
  actions={<Button size="sm">Reconnect</Button>}
>
  Authentication expired for this repository.
</Callout>

Tone colors the leading visual, not the entire message. Danger also receives a restrained tinted surface because it needs stronger separation from ordinary guidance. Each tone supplies a matching Heroicon by default. Pass a custom icon, or pass icon={null} to remove it.

ConnectedRepository access is ready.

Protected branchTwo approvals are required.

Action requiredThe provider token has expired.

tsx

<Callout tone="success" title="Connected">Repository access is ready.</Callout>
<Callout tone="warning" title="Protected branch">Two approvals are required.</Callout>
<Callout tone="danger" title="Action required">The provider token has expired.</Callout>

Semantics

Callout is a neutral container by default. Add role=statusonly for a polite live update, or role=alert only when an urgent message must be announced immediately.

Persistent context

Tones

Semantics