Alert

Use <vara-alert> for notes, guidance, warnings, and status feedback. It is static by default; set role="status" or role="alert" only for content that changes after the page loads.

Usage

<vara-alert
  title="Heads up"
  description="Your changes have not been saved yet."
  color="warning"
/>

Preview

Props

Prop	Type	Default	Description
`title`	string	`""`	Bold heading text.
`description`	string	`""`	Supporting description.
`color`	string	`"neutral"`	One of: neutral, info, success, warning, error.
`icon`	string	auto	Override the icon associated with the color.
`role`	string	`""`	Optional live-region role: status or alert.
`heading_level`	string	`"3"`	Semantic title level: 3 or 4.
`class`	string	`""`	Additional CSS classes.

The description prop takes precedence over the paired body. If you omit it, the component renders its inner content instead.

Colors

Custom icon

Pass any icon name from the bundled icon set to replace the default one:

<vara-alert
  title="Deployment finished"
  description="The latest build is now live."
  icon="rocket"
  color="success"
/>

Richer content

For more than a title and a description, use a paired tag. Its body is rendered as Markdown before it reaches the component:

<vara-alert title="Before you continue" color="info">
  Make sure you have read the [introduction](/docs/). If you already have an
  account, you can **skip this step**.
</vara-alert>