---
name: 3.1 - Button
route: /button
order: 100
menu: 3. Components
---

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

# Button

<PropsTable of={Button} />

## Basic usage
Use Pointr's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

<Playground>
  <Button
    onPress={() => alert('Hello world!')}>
    Click me
  </Button>
</Playground>

## Theming
Pointr includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

<Playground>
  <Button theme="primary">Primary</Button>
  <Button theme="success">Success</Button>
  <Button theme="warning">Warning</Button>
  <Button theme="danger">Danger</Button>
  <Button theme="info">Info</Button>
  <Button theme="light">Light</Button>
</Playground>

## Outline
Do you need a button, but not the hefty background colors they bring? Just add a ```outline``` prop to remove all background images and colors on any button.

<Playground>
  <Button outline theme="primary">Primary</Button>
  <Button outline theme="success">Success</Button>
  <Button outline theme="warning">Warning</Button>
  <Button outline theme="danger">Danger</Button>
  <Button outline theme="info">Info</Button>
  <Button outline theme="light">Light</Button>
</Playground>

## Sizes
Fancy larger or smaller buttons? Add size prop in order to update it

<Playground>
  <Button size="small">Click me</Button>
  <Button theme="info" size="medium">Click me</Button>
  <Button outline theme="danger" size="large">Click me</Button>
</Playground>

## Disabled

<Playground>
  <Button disabled>Click me</Button>
</Playground>

## With an icon

<Playground>
  <Button icon="coffee">Click me</Button>
</Playground>

## Showing Spinner

<Playground>
  <Button loading>Click me</Button>
</Playground>