# Buttons

> A flexible action component supporting variants, sizes, icons, and links.

Source: https://docs.doccupine.com/buttons

> For the complete documentation index, see [llms.txt](https://docs.doccupine.com/llms.txt).

# Buttons

A flexible action component supporting variants, sizes, icons, and links.

Buttons help users initiate actions or navigate to other pages. Use variants to convey emphasis, size for hierarchy, and icons to add clarity.

## Button Usage

You can use the Button component directly within your MDX files without any import. The following examples show basic usage:

```html
<Button>Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="tertiary">Tertiary</Button>
```

<Button>Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="tertiary">Tertiary</Button>

### Sizes

```html
<Button size="default">Default size</Button>
<Button size="big">Big size</Button>
```

<Button size="default">Default size</Button>
<Button size="big">Big size</Button>

### Outline

```html
<Button outline>Outlined</Button>
```

<Button outline>Outlined</Button>

### Full width

```html
<Button fullWidth>Full width button</Button>
```

<Button fullWidth>Full width button</Button>

### With icon

```html
<Button icon="arrow-right" iconPosition="left">
  With left icon
</Button>
<Button icon="arrow-right" iconPosition="right">
  With right icon
</Button>
```

<Button icon="arrow-right" iconPosition="left">With left icon</Button>
<Button icon="arrow-right" iconPosition="right">With right icon</Button>

### As a link

Buttons can render as links when you provide an `href`.

```html
<Button href="/">Home</Button>
```

<Button href="/">Home</Button>

## Properties

<Field value="children" type="node" required>
  The content of the button.
</Field>

<Field value="variant" type="string">
  Controls visual emphasis.
</Field>

- **primary**
- **secondary**
- **tertiary**

<Field value="size" type="string">
  Controls the size of the button.
</Field>

- **default**
- **big**

<Field value="outline" type="boolean">
  When true, renders the outlined style of the selected variant.
</Field>

<Field value="fullWidth" type="boolean">
  When true, the button expands to the full width of its container.
</Field>

<Field value="icon" type="string">
  Optional icon to display inside the button.
</Field>

- [**Lucide icon**](https://lucide.dev/icons) name or icon node

<Field value="iconPosition" type="string">
  The position of the icon relative to the text.
</Field>

- **left**
- **right**

<Field value="href" type="string">
  When provided, the button renders as a link (`<a>`), enabling navigation.
</Field>