Banner · Var UI

Full-width page-level announcement.

Examples

import { Banner } from '@var-ui/react';

<Banner tone="success" appearance="solid">
  Deploy finished in 42s.
</Banner>

Built on React Aria Components where applicable.

Prop	Type	Default	Description
`actions`	`ReactNode`	—	Inline action elements (links, small buttons).
`children`	`ReactNode`	—	Announcement body text.
`className`	`string \| undefined`	—	Additional CSS class names merged onto the root element.
`dismissLabel`	`string \| undefined`	`Dismiss`	Accessible label for the dismiss button.
`icon`	`ReactNode`	—	Override the default tone glyph; pass null to hide the icon slot.
`onDismiss`	`(() => void) \| undefined`	—	When provided, renders a dismiss button that calls this handler on press.
`title`	`string \| undefined`	—	Optional bold headline shown before the body text.

Theme this component via createDesignTheme({ components: { banner: … } }). See Customize for the full override API.

Public classes and data attributes from @var-ui/core banner().

Name	Example	Description
`class`	`var-ui-banner`	Root / part class name
`data-tone`	`info`	Recipe variant / state attribute from `@var-ui/core`.
`data-appearance`	`subtle`	Recipe variant / state attribute from `@var-ui/core`.

Name	Example	Description
`class`	`var-ui-banner__icon`	Root / part class name
`data-tone`	`info`	Recipe variant / state attribute from `@var-ui/core`.
`data-appearance`	`subtle`	Recipe variant / state attribute from `@var-ui/core`.

Name	Example	Description
`class`	`var-ui-banner__content`	Root / part class name
`data-tone`	`info`	Recipe variant / state attribute from `@var-ui/core`.
`data-appearance`	`subtle`	Recipe variant / state attribute from `@var-ui/core`.

Name	Example	Description
`class`	`var-ui-banner__title`	Root / part class name
`data-tone`	`info`	Recipe variant / state attribute from `@var-ui/core`.
`data-appearance`	`subtle`	Recipe variant / state attribute from `@var-ui/core`.

Name	Example	Description
`class`	`var-ui-banner__actions`	Root / part class name
`data-tone`	`info`	Recipe variant / state attribute from `@var-ui/core`.
`data-appearance`	`subtle`	Recipe variant / state attribute from `@var-ui/core`.

Name	Example	Description
`class`	`var-ui-banner__dismiss`	Root / part class name
`data-tone`	`info`	Recipe variant / state attribute from `@var-ui/core`.
`data-appearance`	`subtle`	Recipe variant / state attribute from `@var-ui/core`.

Apply via `recipeProps(recipe(…))` or copy the class / data attributes onto your markup.