---
name: Slim button
route: /components/common/slim-button
edit: false
---

import { Playground, Props } from 'docz'
import SlimButton from './slim-button'

# SlimButton
**SUBCATEGORY:** Buttons

<hr />

## Slim button
### Description
For actions where space is limited, or to resolve conflicting priorities between nearby buttons. Do not use for principle actions.

<Playground style={{ paddingRight: '50%',  display: 'flex', justifyContent: 'space-evenly' }}>
  <SlimButton>Slim button</SlimButton>
  <SlimButton disabled>Slim button</SlimButton>
  <SlimButton icon>
    <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'>
       <path
         d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z' />
     </svg>
  </SlimButton>
</Playground>

<hr />

## Slim button (inverse)
### Description
For actions where space is limited, or to resolve conflicting priorities between nearby buttons. Do not use for principle actions.

<Playground style={{ backgroundColor: "#333", margin: '-2em', padding: '2em 50% 2em 2em', display: 'flex', justifyContent: 'space-evenly' }}>
  <SlimButton inverse>Slim button</SlimButton>
  <SlimButton inverse disabled>Slim button</SlimButton>
  <SlimButton inverse icon>
    <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'>
       <path
         d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z' />
     </svg>
  </SlimButton>
</Playground>

<hr />

## Slim button (secondary)
### Description
For secondary actions where space is limited, and for additional options adjacent to a slim primary button.

<Playground style={{ paddingRight: '50%',  display: 'flex', justifyContent: 'space-evenly' }}>
  <SlimButton secondary>Slim button</SlimButton>
  <SlimButton secondary disabled>Slim button</SlimButton>
  <SlimButton secondary icon>
    <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'>
       <path
         d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z' />
     </svg>
  </SlimButton>
</Playground>

<hr />

## Slim button (inverse, secondary)
### Description
For secondary actions where space is limited, and for additional options adjacent to a slim primary button.

<Playground style={{ backgroundColor: "#333", margin: '-2em', padding: '2em 50% 2em 2em', display: 'flex', justifyContent: 'space-evenly' }}>
  <SlimButton inverse secondary>Slim button</SlimButton>
  <SlimButton inverse secondary disabled>Slim button</SlimButton>
  <SlimButton inverse secondary icon>
    <svg xmlns='http://www.w3.org/2000/svg' width='24' height='24'>
       <path
         d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z' />
     </svg>
  </SlimButton>
</Playground>

<hr />

## Properties
<Props of={SlimButton} />