---
name: Button
menu: General
route: components/button
---

import { Playground, Props } from 'docz';
import { Button, IconButton, Icon } from '@ohif/ui';

# Button

Buttons are used to execute actions when users interacts with them.

## Import

```javascript
import { Button } from '@ohif/ui';
```

## Outlined Buttons

<Playground>
  <div className="p-4">
    <Button variant="outlined" className="m-1">
      Default
    </Button>
    <Button variant="contained" color="primary" className="m-1">
      Primary
    </Button>
    <Button variant="contained" color="secondary" className="m-1">
      Secondary
    </Button>
    <Button variant="outlined" color="white" className="m-1">
      White
    </Button>
  </div>
</Playground>

## Outlined Buttons

<Playground>
  <div className="p-4">
    <Button variant="contained" className="m-1">
      Default
    </Button>
    <Button variant="outlined" color="primary" className="m-1">
      Primary
    </Button>
    <Button variant="outlined" color="secondary" className="m-1">
      Secondary
    </Button>
    <Button variant="contained" color="white" className="m-1">
      White
    </Button>
  </div>
</Playground>

## Text Buttons

<Playground>
  <div className="p-4">
    <Button variant="text" className="m-1">
      Default
    </Button>
    <Button variant="text" color="primary" className="m-1">
      Primary
    </Button>
    <Button variant="text" color="secondary" className="m-1">
      Secondary
    </Button>
    <Button variant="text" color="white" className="m-1">
      White
    </Button>
  </div>
</Playground>

## Rounded Buttons

<Playground>
  <div className="p-4">
    <div className="mb-2">
      <Button variant="contained" rounded="none" className="m-1">
        Non Rounded
      </Button>
      <Button variant="contained" rounded="small" className="m-1">
        Small Rounded
      </Button>
      <Button variant="contained" rounded="medium" className="m-1">
        Medium Rounded
      </Button>
      <Button variant="contained" rounded="large" className="m-1">
        Large Rounded
      </Button>
      <Button variant="contained" rounded="full" className="m-1">
        Full Rounded
      </Button>
    </div>
    <div className="mb-2">
      <Button
        variant="contained"
        rounded="none"
        color="primary"
        className="m-1"
      >
        Non Rounded
      </Button>
      <Button
        variant="contained"
        rounded="small"
        color="primary"
        className="m-1"
      >
        Small Rounded
      </Button>
      <Button
        variant="contained"
        rounded="medium"
        color="primary"
        className="m-1"
      >
        Medium Rounded
      </Button>
      <Button
        variant="contained"
        rounded="large"
        color="primary"
        className="m-1"
      >
        Large Rounded
      </Button>
      <Button
        variant="contained"
        rounded="full"
        color="primary"
        className="m-1"
      >
        Full Rounded
      </Button>
    </div>
    <div className="mb-2">
      <Button
        variant="contained"
        rounded="none"
        color="secondary"
        className="m-1"
      >
        Non Rounded
      </Button>
      <Button
        variant="contained"
        rounded="small"
        color="secondary"
        className="m-1"
      >
        Small Rounded
      </Button>
      <Button
        variant="contained"
        rounded="medium"
        color="secondary"
        className="m-1"
      >
        Medium Rounded
      </Button>
      <Button
        variant="contained"
        rounded="large"
        color="secondary"
        className="m-1"
      >
        Large Rounded
      </Button>
      <Button
        variant="contained"
        rounded="full"
        color="secondary"
        className="m-1"
      >
        Full Rounded
      </Button>
    </div>
    <div className="mb-2">
      <Button variant="contained" rounded="none" color="white" className="m-1">
        Non Rounded
      </Button>
      <Button variant="contained" rounded="small" color="white" className="m-1">
        Small Rounded
      </Button>
      <Button
        variant="contained"
        rounded="medium"
        color="white"
        className="m-1"
      >
        Medium Rounded
      </Button>
      <Button variant="contained" rounded="large" color="white" className="m-1">
        Large Rounded
      </Button>
      <Button variant="contained" rounded="full" color="white" className="m-1">
        Full Rounded
      </Button>
    </div>
  </div>
</Playground>

## Sizes

<Playground>
  <div className="p-4">
    <div>
      <Button variant="text" size="small" className="m-1">
        Small
      </Button>
      <Button variant="contained" size="medium" className="m-1">
        Medium
      </Button>
      <Button variant="outlined" size="large" className="m-1">
        Large
      </Button>
    </div>
    <div>
      <Button
        variant="text"
        size="small"
        color="primary"
        className="m-1"
      >
        Small
      </Button>
      <Button
        variant="contained"
        size="medium"
        color="primary"
        className="m-1"
      >
        Medium
      </Button>
      <Button
        variant="outlined"
        size="large"
        color="primary"
        className="m-1"
      >
        large
      </Button>
    </div>
    <div>
    <Button
      variant="text"
      size="small"
      color="secondary"
      className="m-1"
    >
      Small
    </Button>
    <Button
      variant="contained"
      size="medium"
      color="secondary"
      className="m-1"
    >
      Medium
    </Button>
    <Button
      variant="outlined"
      size="large"
      color="secondary"
      className="m-1"
    >
      Large
    </Button>
    </div>

</div>
</Playground>

## Buttons with icons

<Playground>
  <div className="p-4 flex">
    <Button
      variant="contained"
      color="primary"
      className="m-1"
      startIcon={<Icon name="settings" />}
    >
      Settings
    </Button>
    <Button
      variant="contained"
      color="primary"
      className="m-1"
      endIcon={<Icon name="settings" />}
    >
      Download
    </Button>
    <Button
      variant="outlined"
      rounded="full"
      color="default"
      className="m-1"
      endIcon={<Icon name="settings" />}
    >
      Download
    </Button>
  </div>
</Playground>

## Icon Buttons

Icon buttons are generally used in toolbars.

```javascript
import { IconButton } from '@ohif/ui';
```

<Playground>
  <div className="p-4 flex flex-col items-center">
    <div className="">
      <IconButton className="m-2">
        <Icon name="settings" />
      </IconButton>
      <IconButton className="m-2" variant="text">
        <Icon name="settings" />
      </IconButton>
      <IconButton className="m-2" variant="outlined">
        <Icon name="settings" />
      </IconButton>
    </div>
    <div>
      <IconButton className="m-2" color="primary">
        <Icon name="launch-arrow" />
      </IconButton>
      <IconButton className="m-2" color="primary" variant="text">
        <Icon name="launch-arrow" />
      </IconButton>
      <IconButton className="m-2" color="primary" variant="outlined">
        <Icon name="launch-arrow" />
      </IconButton>
    </div>
    <div>
      <IconButton className="m-2" color="secondary">
        <Icon name="cancel" />
      </IconButton>
      <IconButton className="m-2" color="secondary" variant="text">
        <Icon name="cancel" />
      </IconButton>
      <IconButton className="m-2" color="secondary" variant="outlined">
        <Icon name="cancel" />
      </IconButton>
    </div>
    <div>
      <IconButton className="m-2" color="white">
        <Icon name="settings" />
      </IconButton>
      <IconButton className="m-2" variant="text" color="white">
        <Icon name="launch-arrow" />
      </IconButton>
      <IconButton className="m-2" variant="outlined" color="white">
        <Icon name="cancel" />
      </IconButton>
    </div>
  </div>
</Playground>

<Playground>
  <div className="p-4">
    <div className="">
      <IconButton className="m-2">
        <Icon name="settings" />
      </IconButton>
      <IconButton className="m-2" variant="outlined">
        <Icon name="settings" />
      </IconButton>
      <IconButton className="m-2" variant="text">
        <Icon name="settings" />
      </IconButton>
    </div>
    <div>
      <IconButton className="m-2" color="primary">
        <Icon name="launch-arrow" />
      </IconButton>
      <IconButton className="m-2" color="primary" variant="text">
        <Icon name="launch-arrow" />
      </IconButton>
      <IconButton className="m-2" color="primary" variant="outlined">
        <Icon name="launch-arrow" />
      </IconButton>
    </div>
    <div>
      <IconButton className="m-2" color="secondary">
        <Icon name="cancel" />
      </IconButton>
      <IconButton className="m-2" color="secondary" variant="text">
        <Icon name="cancel" />
      </IconButton>
      <IconButton className="m-2" color="secondary" variant="outlined">
        <Icon name="cancel" />
      </IconButton>
    </div>
    <div>
      <IconButton className="m-2" color="white">
        <Icon name="settings" />
      </IconButton>
      <IconButton className="m-2" variant="text" color="white">
        <Icon name="launch-arrow" />
      </IconButton>
      <IconButton className="m-2" variant="outlined" color="white">
        <Icon name="cancel" />
      </IconButton>
    </div>
  </div>
</Playground>

## Properties

<Props of={Button} />
