# 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

<div>
  <div>
    <div>
      <Button intent="primary">
        Primary Button
      </Button>

      <Button intent="success">
        Success Button
      </Button>

      <Button outlined>
        Outlined Button
      </Button>
    </div>
  </div>
</div>

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

## Variants

### Intents

<div>
  <div>
    <div>
      <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>
    </div>
  </div>
</div>

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

<div>
  <div>
    <div>
      <Button intent="success" outlined large rounded>
        Large, outlined, rounded
      </Button>

      <Button intent="success" minimal>
        Minimal
      </Button>

      <Button intent="warning" mono>
        Monospaced
      </Button>
    </div>
  </div>
</div>

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

<div>
  <div>
    <div>
      <Button small>
        Small Button
      </Button>

      <Button>
        Normal Button
      </Button>

      <Button large>
        Large Button
      </Button>
    </div>
  </div>
</div>

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

### With icons

<div>
  <div>
    <div>
      <Button icon="download">
        Download
      </Button>

      <Button rightIcon="arrow-right">
        Continue
      </Button>

      <Button icon="star" rightIcon="arrow-right">
        Favorite
      </Button>
    </div>
  </div>
</div>

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

<div>
  <div>
    <div>
      <Button href="/learn/docs/getting-started/overview">
        Link Button
      </Button>

      <Button disabled>
        Disabled Button
      </Button>
    </div>
  </div>
</div>

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

## Properties

### Basic

<ParamField path="intent" type="'none' | 'primary' | 'success' | 'warning' | 'danger'" required={false} default="'none'">
  The visual intent of the button
</ParamField>

<ParamField path="disabled" type="boolean" required={false} default="false">
  Whether the button is disabled
</ParamField>

<ParamField path="small" type="boolean" required={false} default="false">
  Whether to use small size
</ParamField>

<ParamField path="large" type="boolean" required={false} default="false">
  Whether to use large size
</ParamField>

<ParamField path="icon" type="string | ReactNode" required={false}>
  Icon to display on the left side
</ParamField>

<ParamField path="href" type="string" required={false}>
  URL to navigate to (renders as link button)
</ParamField>

<ParamField path="target" type="string" required={false}>
  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`).
</ParamField>

### Advanced

<ParamField path="minimal" type="boolean" required={false} default="false">
  Whether to use minimal styling
</ParamField>

<ParamField path="outlined" type="boolean" required={false} default="false">
  Whether to use outlined styling
</ParamField>

<ParamField path="full" type="boolean" required={false} default="false">
  Whether the button should take full width
</ParamField>

<ParamField path="rounded" type="boolean" required={false} default="false">
  Whether to use rounded corners
</ParamField>

<ParamField path="active" type="boolean" required={false} default="false">
  Whether the button is in active state
</ParamField>

<ParamField path="mono" type="boolean" required={false} default="false">
  Whether to use monospace font
</ParamField>

<ParamField path="rightIcon" type="string | ReactNode" required={false}>
  Icon to display on the right side
</ParamField>

<ParamField path="text" type="ReactNode" required={false}>
  The button text content
</ParamField>

<ParamField path="className" type="string" required={false}>
  Additional CSS classes
</ParamField>