<Banner.Root variant="warning">
<WarningIcon />
<Banner.Title>Votre compte Stripe est incomplet.</Banner.Title>
<Banner.Close />
</Banner.Root>An Alert talks about the content it sits next to; a banner talks about the whole session, which is why it is full-bleed and has no description slot.
Banner.Close does not remove the banner by itself. Wire its onClick to
whatever holds the dismissed state, so it stays dismissed on the next page.
API
Banner.Root
| Prop | Type | Default | |
|---|---|---|---|
variant | "default" | "destructive" | "muted" | "success" | "warning" | — | Tone of a page-level message. muted recedes into the page; the rest
signal an outcome that should stop the reader. |
render | ComponentRenderFn<HTMLProps, {}> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
Plus every <div> prop. Source: banner/components/banner-root.tsx.
Banner.Action
| Prop | Type | Default | |
|---|---|---|---|
render | ComponentRenderFn<HTMLProps, {}> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
Plus every <div> prop. Source: banner/components/banner-action.tsx.
Banner.Close
Plus every <button> prop. Source: banner/components/banner-close.tsx.
Banner.Title
| Prop | Type | Default | |
|---|---|---|---|
render | ComponentRenderFn<HTMLProps, {}> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
Plus every <div> prop. Source: banner/components/banner-title.tsx.