---
title: Button
---

import { Button } from '../../../../react-common/src'
import Playground from '../../components/Playground/Playground'
import Props from '../../components/Props/Props'
import Header from '../../components/Header/Header'

<Header of="Button" />

<Playground
  code={`
    <Button
      border
    >
      Perform Action
    </Button>
  `}
  components={{ Button }}
/>

## 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.
