## Documentation index

This index lists every available documentation page and its Markdown source.

- [Documentation](https://vara.varavel.com/docs/index.md)
  - [Introduction](https://vara.varavel.com/docs/introduction/index.md)
  - [Getting Started](https://vara.varavel.com/docs/getting-started/index.md)
    - [Installation](https://vara.varavel.com/docs/getting-started/installation/index.md)
    - [Quick Start](https://vara.varavel.com/docs/getting-started/quick-start/index.md)
    - [Composing a Landing Page](https://vara.varavel.com/docs/getting-started/composing-landing-page/index.md)
  - [Fundamentals](https://vara.varavel.com/docs/fundamentals/index.md)
    - [Project Structure](https://vara.varavel.com/docs/fundamentals/project-structure/index.md)
    - [Page Generators](https://vara.varavel.com/docs/fundamentals/page-generators/index.md)
    - [Site Settings](https://vara.varavel.com/docs/fundamentals/site-settings/index.md)
    - [Search and LLM Output](https://vara.varavel.com/docs/fundamentals/search-and-llms/index.md)
    - [Customization](https://vara.varavel.com/docs/fundamentals/customization/index.md)
    - [Functions and Filters](https://vara.varavel.com/docs/fundamentals/functions-and-filters/index.md)
  - [Templates](https://vara.varavel.com/docs/templates/index.md)
    - [vara-landing](https://vara.varavel.com/docs/templates/landing/index.md)
    - [vara-docs](https://vara.varavel.com/docs/templates/docs/index.md)
    - [vara-docs-raw](https://vara.varavel.com/docs/templates/docs-raw/index.md)
    - [vara-docs-search-index](https://vara.varavel.com/docs/templates/docs-search-index/index.md)
    - [vara-docs-llms-txt](https://vara.varavel.com/docs/templates/docs-llms-txt/index.md)
    - [vara-docs-llms-full-txt](https://vara.varavel.com/docs/templates/docs-llms-full-txt/index.md)
    - [vara-sitemap-xml](https://vara.varavel.com/docs/templates/sitemap-xml/index.md)
    - [vara-404](https://vara.varavel.com/docs/templates/404/index.md)
  - [Components](https://vara.varavel.com/docs/components/index.md)
    - [Alert](https://vara.varavel.com/docs/components/alert/index.md)
    - [Badge](https://vara.varavel.com/docs/components/badge/index.md)
    - [Button](https://vara.varavel.com/docs/components/button/index.md)
    - [Container](https://vara.varavel.com/docs/components/container/index.md)
    - [Icon](https://vara.varavel.com/docs/components/icon/index.md)
    - [Keyboard Key](https://vara.varavel.com/docs/components/kbd/index.md)
    - [Header](https://vara.varavel.com/docs/components/header/index.md)
    - [Hero](https://vara.varavel.com/docs/components/hero/index.md)
    - [Content Split](https://vara.varavel.com/docs/components/content-split/index.md)
    - [Features](https://vara.varavel.com/docs/components/features/index.md)
    - [Stats](https://vara.varavel.com/docs/components/stats/index.md)
    - [FAQ](https://vara.varavel.com/docs/components/faq/index.md)
    - [Testimonial](https://vara.varavel.com/docs/components/testimonial/index.md)
    - [Carousel](https://vara.varavel.com/docs/components/carousel/index.md)
    - [Call to Action](https://vara.varavel.com/docs/components/cta/index.md)
    - [Footer](https://vara.varavel.com/docs/components/footer/index.md)
  - [Troubleshooting](https://vara.varavel.com/docs/troubleshooting/index.md)


## Documentation content

The documentation for the current page follows, reproduced verbatim.


# 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

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

## Preview

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

## 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

<vara-alert title="Information" description="The report will refresh on the next run." color="info" />

<vara-alert title="Success" description="Your profile was updated." color="success" />

<vara-alert title="Error" description="The file could not be uploaded." color="error" />

## Custom icon

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

```html
<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:

```html
<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>
```