---
name: Button
---

import { Playground, PropsTable } from 'docz'

import { Button } from './button.js'
import { DoczWrapper } from '../theme/docz.js'

# Button

## Properties

<PropsTable of={Button} />

## Variations

### Primary

<Playground>
  <div style={{ backgroundColor: '#000', padding: '20px' }}>
    <DoczWrapper>
      {() => (
        <Button
          label='Click me!'
          onClick={() => alert('Clicked')}
        />
      )}
    </DoczWrapper>
  </div>
</Playground>

### Secondary

<Playground>
  <div style={{ backgroundColor: '#000', padding: '20px' }}>
    <DoczWrapper>
      {() => (
        <Button
          label='Click me!'
          onClick={() => alert('Clicked')}
          variant='secondary'
        />
      )}
    </DoczWrapper>
  </div>
</Playground>

### Primary Disabled

<Playground>
  <div style={{ backgroundColor: '#000', padding: '20px' }}>
    <DoczWrapper>
      {() => (
        <Button
          label='Cannot click'
          disabled
        />
      )}
    </DoczWrapper>
  </div>
</Playground>

### Secondary Disabled

<Playground>
  <div style={{ backgroundColor: '#000', padding: '20px' }}>
    <DoczWrapper>
      {() => (
        <Button
          label='Cannot click'
          disabled
          variant='secondary'
        />
      )}
    </DoczWrapper>
  </div>
</Playground>

### Link Button

<Playground>
  <div style={{ backgroundColor: '#000', padding: '20px' }}>
    <DoczWrapper>
      {() => (
        <Button
          label='Click me!'
          isLink
          to='/my-route'
        />
      )}
    </DoczWrapper>
  </div>
</Playground>
