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

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

# Button

Buttons make common actions more obvious and help users more easily perform them. Buttons use labels and sometimes icons to communicate the action that will occur when the user touches them.

## Properties

<Props of={Button} />

## MML string

```xml
<mml>
  <button name="action" value="Activate">
    Regular button
  </button>
</mml>
```

## Basic usage

<Playground>
  <MML
    source={`
    <button name="action" value="activate" url="https://getstream.io">
      A link to GetStream
    </button>
  `}
  />
</Playground>

## With `floating` variant

<Playground>
  <MML
    source={`
    <mml>
      <button name="action" value="activate" variant="floating">
        A floating button
      </button>
    </mml>
  `}
  />
</Playground>

## With icon and text

<Playground>
  <MML
    source={`
    <mml>
      <button name="action" value="activate" icon="people">
        Send to all
      </button>
    </mml>
  `}
  />
</Playground>

## With only an icon

<Playground>
  <MML
    source={`
    <mml>
      <button name="action" value="activate" icon="shopping_cart"></button>
    </mml>
  `}
  />
</Playground>