Banner
Display a full-width message within the page layout.
Preview
Import
import { Banner } from "@sigil-ui/components";Usage
<Banner>
Banner content
</Banner>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | BannerVariant | — | Selects a supported visual treatment. |
icon | ReactNode | — | Icon configuration. |
dismissible | boolean | — | Dismissible configuration. |
onDismiss | () => void | — | On Dismiss configuration. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-surface | Surface |
--s-border | Border |
--s-text | Text |
--s-info-muted | Info muted |
--s-info | Info |
--s-warning-muted | Warning muted |
--s-warning | Warning |
--s-error-muted | Error muted |
--s-error | Error |
--s-success-muted | Success muted |
--s-success | Success |
--s-banner-icon-gap | Banner icon gap |