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

# Button

Buttons are flexible elements with visual impact that are used in various ways such as linking to file downloads and hyperlinking between pages.

<Frame>
  <img src="https://mintcdn.com/standards/y7gYF6Re_-i4oGOd/images/button-01.gif?s=b474ea0df0d7467e1288b6b2853d6ade" alt="Examples of various button designs" width="1200" height="600" data-path="images/button-01.gif" />
</Frame>

***

## Button basics

**Buttons** are an element that can be added to your project layout and menu, and consists of three parts: the button container, the text content, and the icon content. **Buttons** may have **Text**, **Icon,** or both shown or hidden.

### Button variations

<Columns cols={3}>
  <Column>
    <Frame>
      <img src="https://mintcdn.com/standards/y7gYF6Re_-i4oGOd/images/button-basics-01.png?fit=max&auto=format&n=y7gYF6Re_-i4oGOd&q=85&s=e351e4908cef4fc049618734d5c387c9" alt="Button with text and icon" width="600" height="600" data-path="images/button-basics-01.png" />
    </Frame>
  </Column>

  <Column>
    <Frame>
      <img src="https://mintcdn.com/standards/y7gYF6Re_-i4oGOd/images/button-basics-02.png?fit=max&auto=format&n=y7gYF6Re_-i4oGOd&q=85&s=9f09581f3b3227039159f4a0b78f8469" alt="Simple square button with arrow icon" width="600" height="600" data-path="images/button-basics-02.png" />
    </Frame>
  </Column>

  <Column>
    <Frame>
      <img src="https://mintcdn.com/standards/y7gYF6Re_-i4oGOd/images/button-basics-03.png?fit=max&auto=format&n=y7gYF6Re_-i4oGOd&q=85&s=111f1831e6aa746902c068a58442fc32" alt="Pill shaped button with text" width="600" height="600" data-path="images/button-basics-03.png" />
    </Frame>
  </Column>

  <Column>
    **Button** with text & icon content turned on.
  </Column>

  <Column>
    **Button** with just icon content turned on.
  </Column>

  <Column>
    **Button** with just text content turned on.
  </Column>
</Columns>

### Adding buttons

<Steps>
  <Step title="Select button add tool">
    <Frame>
      <img src="https://mintcdn.com/standards/lLDViF-11M9txQsJ/images/button-add-menu.png?fit=max&auto=format&n=lLDViF-11M9txQsJ&q=85&s=cc9365aee7be919f191fd3be31729313" alt="Add menu dropdown open showing a list of all options" width="1200" height="600" data-path="images/button-add-menu.png" />
    </Frame>

    From within the editor, select **Button** from the  `+` menu in the top bar, or use the hotkey <kbd>B</kbd>
  </Step>

  <Step title="Select area to add to">
    Select a point in the project body by selecting between layouts, click + dragging within, or selecting a point inside a column.
  </Step>

  <Step title="Add click behavior">
    Select the click behavior button from the contextual toolbar and choose the desired behavior, like download file or link to page.
  </Step>
</Steps>

***

## General use

**Buttons** have a wide range of use. Here are common general uses:

### Linking

Setting **On click** → **Link to** is a common use for making buttons into navigating elements in body and in menus.

### Menu items

Building menus with **buttons** is a great way to create navigation items. Doing this allows for a wide range of styling, beyond regular **text**, such as hover and active states.

***

## Advanced

**Buttons** can be used in creative ways to enhance a site’s navigation with larger visual impact.

<iframe src="https://www.loom.com/embed/963c0d7dba744e04b8100a25073c3df3" title="Loom video player" frameborder="0" className="w-full aspect-video rounded-xl" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen />

### Table of contents

A grid of buttons can be used to create a tiled grid linking to different sections of a site.

<Frame>
  <img src="https://mintcdn.com/standards/y7gYF6Re_-i4oGOd/images/button-advanced-01.gif?s=02a50e7d7cebf3217965cab829df3180" alt="Bento box grid of large buttons linking to different guideline pages" width="800" height="340" data-path="images/button-advanced-01.gif" />
</Frame>

### Pagination

Two side by side half width buttons can be used at the bottom of pages to link between pages

<Frame>
  <img src="https://mintcdn.com/standards/y7gYF6Re_-i4oGOd/images/button-advanced-pagination-01.gif?s=5427e23f3694c68c40b0026065cb87a4" alt="Large previous and next page buttons at the bottom of a page" width="1200" height="600" data-path="images/button-advanced-pagination-01.gif" />
</Frame>

***

## Button settings

While selecting a **Button** element, the right sidebar will display the available settings for styling the container as well as the text and icon within. Each state can have these settings altered independently from another, or synced together.

***

## Button states

All buttons have various states that can be styled. This allows for visual hierarchy between default and active or rest and hover.

### Default

Button is off/unselected

* **Rest:** cursor elsewhere
* **Hover:** cursor over the button

### Active

Button is on/selected

* **Rest:** cursor elsewhere
* **Hover:** cursor over the button

***

## Tip: Button components

Buttons are one of the best candidates for making into components. Style a button, create a component of it, then use it throught your guideline.