---
route: /components/button-list
menu: Components
---

import { Playground, Props } from 'docz';
import { ButtonList } from './ButtonList.tsx';

# ButtonList

Display a list of buttons, a tyical usecase is allowing the user to select an option among a list. It is usually used in pair with some [`Button`](/components/button)

## Properties

<Props of={ButtonList} />

## MML string

```xml
<mml>
  <button_list>
    <button name="side" value="yes">
      Yes!
    </button>
    <button name="side" value="no">
      No, thanks
    </button>
  </button_list>
</mml>
```

## Basic usage

<Playground>
  <MML
    source={`
    <mml>
      <button_list>
        <button name="side" value="yes">
          Yes!
        </button>
        <button name="side" value="no">
          No, thanks
        </button>
      </button_list>
    </mml>
  `}
  />
</Playground>

## With `floating` variant

<Playground>
  <MML
    source={`
    <mml>
      <button_list variant="floating">
        <button variant="floating" name="side" value="yes">
          Yes!
        </button>
        <button variant="floating" name="side" value="no">
          No, thanks
        </button>
      </button_list>
    </mml>
  `}
  />
</Playground>

<Playground>
  <MML
    source={`
    <mml>
      <text>How many days do you need?</text>
      <button_list variant="floating">
        <button variant="floating" name="side" value="1">1</button>
        <button variant="floating" name="side" value="2">2</button>
        <button variant="floating" name="side" value="3">3</button>
        <button variant="floating" name="side" value="4">4</button>
        <button variant="floating" name="side" value="5+">5+</button>
      </button_list>
    </mml>
  `}
  />
</Playground>

## With icon only buttons

<Playground>
  <MML
    source={`
    <mml>
      <text>How do you feel about it?</text>
      <button_list variant="floating">
        <button variant="floating" name="feeling" value="1" icon="sentiment_dissatisfied" />
        <button variant="floating" name="feeling" value="2" icon="sentiment_satisfied" />
        <button variant="floating" name="feeling" value="3" icon="sentiment_very_dissatisfied" />
        <button variant="floating" name="feeling" value="4" icon="sentiment_very_satisfied" />
      </button_list>
    </mml>
  `}
  />
</Playground>