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

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

# Button

## Import
`import { Button } from '@blasterjs/core'`

## Basic Usage

The `<Button>` component renders a `<button>` with basic styles by default.

<Playground>
  <Button>Button</Button>
  <Button appearance="minimal">Minimal</Button>
  <Button appearance="prominent" intent="success">Prominent</Button>
</Playground>

## Icons
<Playground>
  <Button iconBefore="edit" appearance="minimal">Before</Button>
  <Button iconAfter="eye" intent="primary">After</Button>
  <Button iconBefore="minus" iconAfter="plus" appearance="prominent" intent="secondary">Both</Button>
</Playground>

## Disabled
<Playground>
  <Button disabled appearance="minimal">Minimal</Button>
  <Button disabled appearance="default">Default</Button>
  <Button disabled appearance="prominent">Prominent</Button>
</Playground>

## Loading
<Playground>
  <Button isLoading appearance="minimal">Minimal</Button>
  <Button isLoading appearance="default">Default</Button>
  <Button isLoading appearance="prominent">Prominent</Button>
</Playground>

## Block
<Playground>
  <Button block>Block button</Button>
</Playground>

### PropTypes
| Prop | Type | Required | Default | Description | Themeable |
|:-----|:-----|:---------|:--------|:------------|:----------|
| appearance | enum | no | `default` | `["default", "prominent", "minimal"]` |  |
| intent | string | no | | Theme provides styles for `["primary", "secondary", "success", "warning", "danger"]` | yes |
| scale | string | no | | Theme provides styles for `["small", "large"]` | yes |
| block | bool | no | `false` | Makes the button fill available space |
| disabled | bool | no | `false` | Sets the `disabled` attribute on the Button |
| isLoading | bool | no | `false` | Displays an animated loading icon in place of children |
| iconBefore | bool | no | `false` | Displays an animated loading icon in place of children |
| `COMMON` | Style Prop |  |  | see [Style Props](/style-props) |
| `BACKGROUND` | Style Prop |  |  | see [Style Props](/style-props) |
| `BORDER` | Style Prop |  |  | see [Style Props](/style-props) |
| `FLEX_ITEM` | Style Prop |  |  | see [Style Props](/style-props) |
| `TYPOGRAPHY` | Style Prop |  |  | see [Style Props](/style-props) |
| `MISC` | Style Prop |  |  | see [Style Props](/style-props) |
| `LAYOUT` | Style Prop |  |  | see [Style Props](/style-props) |
| `POSITION` | Style Prop |  |  | see [Style Props](/style-props) |


## Theming

### Schema
```
{
  base: {
    colors: {
      color,
      colorDark,
      colorLight,
      bg,
      bgHover,
      border
    },
    space: {
      pt,
      pb,
      pl,
      pr
    },
    radii: {
      radius
    },
    fonts: {
      font
    },
    fontSizes: {
      fontSize
    },
    fontWeights: {
      fontWeight
    },
    lineHeights: {
      lineHeight
    }
  },
  intents: {
    colors: {
      primary,
      secondary,
      success,
      warning,
      danger,
      $CUSTOM_KEY
    }
  },
  scale: {
    small: {
      space: {
        pt,
        pb,
        pl,
        pr
      },
      radii: {
        radius
      },
      fontSizes: {
        fontSize
      },
      fontWeights: {
        fontWeight
      },
      lineHeights: {
        lineHeight
      }
    },
    large: {
      space: {
        pt,
        pb,
        pl,
        pr
      },
      radii: {
        radius
      },
      fontSizes: {
        fontSize
      },
      fontWeights: {
        fontWeight
      },
      lineHeights: {
        lineHeight
      }
    },
    $CUSTOM_KEY: {
      ...
    }
  },
  overrides: css`
    ...
  `
}
```

- [Default theme](https://github.com/raster-foundry/blasterjs/tree/master/packages/core/theme/components/button)
- [Learn more about themeing](/blaster-theme)