Alert

Inline status message with tone variants.

Examples

Default

Registry icons

Alerts pull their tone glyph from IconProvider automatically.

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

<Alert variant="info" title="Registry icons">
  Alerts pull their tone glyph from IconProvider automatically.
</Alert>

Props

Accessibility

Built on React Aria Components where applicable.

Props

Prop	Type	Default	Description
`variant`	`AlertTone`	—	Semantic tone that drives color and the default icon.
`action`	`{ href: string; label: string; } \| undefined`	—	Optional text link rendered below the message body.
`appearance`	`SurfaceAppearance \| undefined`	`subtle`	Surface treatment.
`children`	`ReactNode`	—	Message body.
`className`	`string \| undefined`	—	Additional CSS class names merged onto the root element.
`icon`	`ReactNode`	—	Override the default tone glyph; pass null to hide the icon slot.
`title`	`string \| undefined`	—	Optional bold headline above the body content.

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

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

root

Name	Example	Description
`class`	`var-ui-alert`	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`.
`data-content-gap`	`spaced`	Recipe variant / state attribute from `@var-ui/core`.

icon

Name	Example	Description
`class`	`var-ui-alert__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`.
`data-content-gap`	`spaced`	Recipe variant / state attribute from `@var-ui/core`.

body

Name	Example	Description
`class`	`var-ui-alert__body`	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`.
`data-content-gap`	`spaced`	Recipe variant / state attribute from `@var-ui/core`.

title

Name	Example	Description
`class`	`var-ui-alert__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`.
`data-content-gap`	`spaced`	Recipe variant / state attribute from `@var-ui/core`.

content

Name	Example	Description
`class`	`var-ui-alert__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`.
`data-content-gap`	`spaced`	Recipe variant / state attribute from `@var-ui/core`.

action

Name	Example	Description
`class`	`var-ui-alert__action`	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`.
`data-content-gap`	`spaced`	Recipe variant / state attribute from `@var-ui/core`.

actionLink

Name	Example	Description
`class`	`var-ui-alert__actionLink`	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`.
`data-content-gap`	`spaced`	Recipe variant / state attribute from `@var-ui/core`.

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