> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velure.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Buttons

> Button.vue Component Documentation

The `Button.vue` component dynamically renders either a `<button>` or a `<Link>` element based on the `href` prop. It can be styled as solid, hollow, or text-based and supports different sizes and loading states.

***

## Features

<CardGroup cols={2}>
  <Card title="Dynamic Rendering" icon="square-1">
    Renders as a <code>\<button></code> or <code>\<Link></code> element based on the <code>href</code> prop.
  </Card>

  <Card title="Flexible Styling" icon="square-2">
    Supports solid, hollow, and text-based styles with customizable sizes.
  </Card>

  <Card title="Slots for Customization" icon="square-3">
    Includes slots for icons and custom content, allowing dynamic layouts.
  </Card>

  <Card title="Loading States" icon="square-4">
    Handles loading states with a <code>processingLabel</code> and disabled interaction.
  </Card>

  <Card title="Variants" icon="square-5">
    Offers multiple variants like huge, hollow, text, and small buttons for diverse use cases.
  </Card>
</CardGroup>

***

### Basic Button

```js theme={null}
import { Button } from '@robojuice/velure-ui';
```

```vue theme={null}
<Button>Button</Button>
<Button secondary>Button Secondary</Button>
```

***

## Props

<ParamField path="disabled" type="string | boolean" default="false">
  Disables the button if set to `true`.
</ParamField>

<ParamField path="kind" type="string" default="'button'">
  Determines the button's style. Options: `button`, `text`, `hollow`.
</ParamField>

<ParamField path="href" type="string | object" default="''">
  If set, renders the button as a `<Link />` element with the given value.
</ParamField>

<ParamField path="size" type="string" default="''">
  Adjusts the button's size. Options: `small`, `huge`.
</ParamField>

<ParamField path="secondary" type="boolean" default="false">
  Applies secondary styling when `true`.
</ParamField>

<ParamField path="processing" type="boolean" default="false">
  Indicates a loading state.
</ParamField>

<ParamField path="processingLabel" type="string" default="'Saving...'">
  Text to display while in the `processing` state.
</ParamField>

***

## Slots

<ParamField path="default" type="slot">
  Main content of the button.
</ParamField>

<ParamField path="iconLeft" type="slot">
  Content (e.g., icon) to be displayed to the left of the button label. `<template #iconLeft></template>`
</ParamField>

<ParamField path="iconRight" type="slot">
  Content (e.g., icon) to be displayed to the right of the button label. `<template #iconRight></template>`
</ParamField>

## Variants

### Button Variants

* **Default Button**: `<Button>` (solid by default).
* **Hollow Button**: `<ButtonHollow>` (outlined style).
* **Huge Button**: `<ButtonHuge>` (larger size).
* **Text Button**: `<ButtonText>` (minimal text-based button).
* **Small Button**: `<ButtonSmall>` (smaller size).

***

## Examples

### Basic Text Button

```js theme={null}
import { ButtonText } from '@robojuice/velure-ui';
```

```vue theme={null}
<ButtonText>Button Text</ButtonText>
<ButtonText secondary>Button Text</ButtonText>
```

### Text Button with Icons

```vue theme={null}
<ButtonText secondary>
  <template #iconLeft>
    <IconUpload />
  </template>
  Button Text - Icon
  <template #iconRight>
    <IconUpload />
  </template>
</ButtonText>
```

### Small Buttons

```js theme={null}
import { ButtonSmall } from '@robojuice/velure-ui';
```

```vue theme={null}
<ButtonSmall>Button Text</ButtonSmall>
```

### Processing State

```vue theme={null}
<Button :processing="true" :processing-label="`Processing...`">
Button Hollow
</Button>
```

### Hollow Buttons

```js theme={null}
import { ButtonHollow } from '@robojuice/velure-ui';
```

```vue theme={null}
<ButtonHollow>Button Hollow</ButtonHollow>
```

### Huge Buttons

```js theme={null}
import { ButtonHuge } from '@robojuice/velure-ui';
```

```vue theme={null}
<ButtonHuge>Button Huge</ButtonHuge>
```

***

## Notes

* For navigation purposes, ensure valid `href` values are provided for `Button` or `ButtonHollow`.
* Buttons in the `processing` state will display the `processingLabel` and disable interaction.
* Customize the component styles by modifying or extending the underlying CSS classes.