Buttons

Set automated and responsive spacing and wrapping behaviour for a list of Button components.

Figma componentStorybook documentation

React

<Button>
  <Button>Save</Button>
  <Button color="secondary">Edit</Button>
</Buttons>

CSS

<div class="buttons">
  <button type="button" class="button">Save</button>
  <button type="button" class="button button-secondary">Edit</button>
</div>

Props

Direction

Change the button style.

React

<Buttons>
  <Button>Landscape</Button>
  <Button color="secondary">Landscape</Button>
</Buttons>
<Buttons direction="portrait">
  <Button>Portrait</Button>
  <Button color="secondary">Portrait</Button>
</Buttons>

CSS

<div class="buttons">
  <button type="button" class="button">Landscape</button>
  <button type="button" class="button button-secondary">Landscape</button>
</div>
<div class="buttons buttons-portrait">
  <button type="button" class="button">Portrait</button>
  <button type="button" class="button button-secondary">Portrait</button>
</div>

FullWidth

React

<Buttons fullWidth>
  <Button>Full width</Button>
  <Button color="secondary">Full width</Button>
</Buttons>

CSS

<div class="buttons buttons-fullWidth">
  <button type="button" class="button">Full width</button>
  <button type="button" class="button button-secondary">Full width</button>
</div>

Wide

React

<Buttons wide>
  <Button>Wide</Button>
  <Button color="secondary">Wide</Button>
</Buttons>

CSS

<div class="buttons buttons-wide">
  <button type="button" class="button">Wide</button>
  <button type="button" class="button button-secondary">Wide</button>
</div>