> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt.

# Button

> Learn how to use the Button component in Fern docs. Create interactive buttons with custom styles, sizes, intents, and icons.

The `<Button>` component renders interactive buttons with various styles, sizes, and intents.

## Usage

Primary Button

Success Button

Outlined Button

**`Markdown`**

```jsx Markdown 
<Button intent="primary">Primary Button</Button>
<Button intent="success">Success Button</Button>
<Button outlined>Outlined Button</Button>
```

## Variants

### Intents

Primary button

Success button

Warning button

Danger button

Plain button

**`Markdown`**

```jsx Markdown
<Button intent="primary">Primary button</Button>
<Button intent="success">Success button</Button>
<Button intent="warning">Warning button</Button>
<Button intent="danger">Danger button</Button>
<Button intent="none">Plain button</Button>
```

### Styles

Large, outlined, rounded

Minimal

Monospaced

**`Markdown`**

```jsx Markdown
<Button intent="success" outlined large rounded>Large, outlined, rounded</Button>
<Button intent="success" minimal>Minimal</Button>
<Button intent="warning" mono>Monospaced</Button>
```

### Sizes

Small Button

Normal Button

Large Button

**`Markdown`**

```jsx Markdown
<Button small>Small Button</Button>
<Button>Normal Button</Button>
<Button large>Large Button</Button>
```

### With icons

Download

Continue

Favorite

**`Markdown`**

```jsx Markdown
<Button icon="download">Download</Button>
<Button rightIcon="arrow-right">Continue</Button>
<Button icon="star" rightIcon="arrow-right">Favorite</Button>
```

### Link and disabled states

Link Button

Disabled Button

**`Markdown`**

```jsx Markdown
<Button href="/learn/docs/getting-started/overview">Link Button</Button>
<Button disabled>Disabled Button</Button>
```

## Properties

### Basic

**`intent`** `'none' | 'primary' | 'success' | 'warning' | 'danger'` — default: 'none'

The visual intent of the button

---

**`disabled`** `boolean` — default: false

Whether the button is disabled

---

**`small`** `boolean` — default: false

Whether to use small size

---

**`large`** `boolean` — default: false

Whether to use large size

---

**`icon`** `string | ReactNode`

Icon to display on the left side

---

**`href`** `string`

URL to navigate to (renders as link button)

---

**`target`** `string`

Specifies where to open the linked URL. For typical documentation sites, links can open in the same tab (`_self`) or new tab (`_blank`). For documentation embedded in a dashboard or iframe, links can open in the parent frame (`_parent`) or topmost frame (`_top`).

---

### Advanced

**`minimal`** `boolean` — default: false

Whether to use minimal styling

---

**`outlined`** `boolean` — default: false

Whether to use outlined styling

---

**`full`** `boolean` — default: false

Whether the button should take full width

---

**`rounded`** `boolean` — default: false

Whether to use rounded corners

---

**`active`** `boolean` — default: false

Whether the button is in active state

---

**`mono`** `boolean` — default: false

Whether to use monospace font

---

**`rightIcon`** `string | ReactNode`

Icon to display on the right side

---

**`text`** `ReactNode`

The button text content

---

**`className`** `string`

Additional CSS classes

---

> Learn how to use the Button component in Fern docs. Create interactive buttons with custom styles, sizes, intents, and icons.