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


# Button

`<vara-button>` renders an anchor when `href` is present and a native button otherwise. Use links for navigation and buttons for actions.

## Usage

```html
<vara-button label="Read the guide" href="/docs/" icon_end="arrow-right" />
```

## Preview

<div class="not-prose flex flex-wrap items-center gap-3">
  <vara-button label="Read the guide" href="/docs/" icon_end="arrow-right" />
  <vara-button label="Secondary action" variant="outline" />
</div>

## Props

| Prop         | Type   | Default      | Description                                               |
| ------------ | ------ | ------------ | --------------------------------------------------------- |
| `label`      | string | slot content | Visible action label.                                     |
| `href`       | string | `""`         | Destination. Its presence selects anchor rendering.       |
| `target`     | string | `""`         | Link target, such as `_blank`.                            |
| `type`       | string | `"button"`   | Native button type.                                       |
| `icon_start` | string | `""`         | Decorative icon before the label.                         |
| `icon_end`   | string | `""`         | Decorative icon after the label.                          |
| `size`       | string | `"md"`       | One of: sm, md, lg.                                       |
| `variant`    | string | `"solid"`    | One of: solid, outline, ghost.                            |
| `color`      | string | `"neutral"`  | One of: neutral, info, success, warning, error.           |
| `radius`     | string | `"md"`       | One of: sm, md, lg, full.                                 |
| `full_width` | string | `"false"`    | Stretch to the available width.                           |
| `disabled`   | string | `"false"`    | Disable native buttons or render links non-interactively. |
| `class`      | string | `""`         | Additional CSS classes.                                   |

Root-relative `href` values are deployment-aware. New-tab links automatically receive `rel="noopener noreferrer"`.

## Icons

Decorative icons can sit on either side of the label:

```html
<vara-button label="Sign up" href="/signup" icon_start="user-plus" />
<vara-button label="Next step" icon_end="arrow-right" />
```

## Variants

<div class="not-prose flex flex-wrap items-center gap-3">
  <vara-button label="Solid" />
  <vara-button label="Outline" variant="outline" />
  <vara-button label="Ghost" variant="ghost" />
  <vara-button label="Disabled" disabled="true" />
</div>