#### Button Themes

```jsx
import Flex from '@ui/components/Flex';
const colors = ['slate', 'blue', 'green', 'red', 'yellow', 'purple', 'shale', 'chalk'];

<Flex justify="around">
  {colors.map(c => <Button key={`1_${c}`} bem={{ [c]: true }}>{c}</Button>)}
</Flex>;
```

#### Ghost

```jsx
import Flex from '@ui/components/Flex';
const colors = ['slate', 'blue', 'green', 'red', 'yellow', 'purple', 'shale', 'chalk'];

<Flex justify="around">
  {colors.map(c => <Button key={`2_${c}`} bem={{ [`${c}_ghost`]: true }}>{c}</Button>)}
</Flex>;
```

#### Text

```jsx
import Flex from '@ui/components/Flex';
const colors = ['slate', 'blue', 'green', 'red', 'yellow', 'purple', 'shale', 'chalk'];


<Flex justify="around">
  {colors.map(c => <Button key={`2_${c}`} bem={{ [`${c}_text`]: true }}>{c}</Button>)}
</Flex>;
```

#### White

```jsx
import Flex from '@ui/components/Flex';


<Flex justify="around" style={{ background: 'black', borderRadius: 4, margin: -16, padding: 16, position: 'relative', zIndex: 1 }}>
  <Button bem={{ white: true }}>white</Button>
  <Button bem={{ white_ghost: true }}>white</Button>
  <Button bem={{ white_text: true }}>white</Button>
</Flex>;
```

#### Sizes

```jsx
import Flex from '@ui/components/Flex';
const sizes = ['sm', 'md', 'lg'];

<Flex justify="around">
  <Button size="sm">Small</Button>
  <Button size="md">Medium</Button>
  <Button size="lg">Large</Button>
</Flex>;
```

#### Circular

```jsx
import Flex from '@ui/components/Flex';

<Flex justify="around">
  <Button circular>Circular</Button>
</Flex>;
```

#### Icons
Make sure to wrap any top-level text content in an additional `<span>` tag when using icons, since Buttons use the `:first-child`, `:last-child`, and `:only-child` selectors to evenly space their inner contents.

```jsx
import Flex from '@ui/components/Flex';

<Flex justify="around">
  <Button>
    <span>Menu</span>
    <i class="fa fa-chevron-down"/>
  </Button>
</Flex>;
```