Banner

Inline alert for persistent messages. Four tones with appropriate icons.

Examples

All tones

Version 1.0 available

Production-ready. See the changelog on GitHub.

All good!

Components loaded successfully.

Heads up

Tailwind CSS 4 is required.

Error

A peer dependency is missing.

<Banner tone="info" title="Version 1.0 available">
  Production-ready. See the changelog on GitHub.
</Banner>

<Banner tone="success" title="All good!">
  Components loaded successfully.
</Banner>

<Banner tone="warning" title="Heads up">
  Tailwind CSS 4 is required.
</Banner>

<Banner tone="error" title="Error">
  A peer dependency is missing.
</Banner>

Without title

Quick inline message without a heading.

<Banner tone="info">Quick inline message without a heading.</Banner>

API Reference

Props of the Banner component.

Prop	Type	Default	Description
`tone`	`'info' \| 'success' \| 'warning' \| 'error'`	`'info'`	—
`title`	`ReactNode`	—	Optional bold leading line.
`children*`	`ReactNode`	—	Body content.
`icon`	`ReactNode \| null`	—	Override the default tone icon. Pass null to hide it.