---
name: Button
route: /components/button
menu: Components
---

import { Playground, Props } from 'docz'
import Button from './Button'

# Button

Component for performing an action upon activation (e.g. when clicked).

<Playground>
  <Button>Perform Action</Button>
</Playground>

## Props

<Props of={Button} />

## Usage Notes

The default variant is `outline` as the `primary` variant is intended for
the most essential call-to-action in a section or a page. Choose `primary`
only if the component encapsulates the primary action of the view (e.g. log-in
in a log-in form), else resort to using `outline` (specifying the prop is optional).

The design of the button label is intended to be in uppercase as per the
[Tesseract Design Guidelines](https://make.modal.sh/tesseract/design). Avoid using
pronounceable initials in the button label, unless:

- It is well-known.

  Initials such as URL and API are popular to a very wide selection of people. However,
  initials such as [SOAP (Simple Object Access Protocol)](https://en.wikipedia.org/wiki/SOAP)
  or [POST (power-on self test)](https://en.wikipedia.org/wiki/Power-on_self-test) may be
  confusing if not enough context is provided.

- The context wherein the initials are used is clearly indicated.

  For example, using [cURL](https://en.wikipedia.org/wiki/CURL) (which would be displayed as "CURL") in a page that
  deals with cURL requests is acceptable.