Basic button:

```jsx
 <div>
        <Button color="primary">primary</Button>{' '}
        <Button color="secondary">secondary</Button>{' '}
        <Button color="success">success</Button>{' '}
        <Button color="info">info</Button>{' '}
        <Button color="warning">warning</Button>{' '}
        <Button color="danger">danger</Button>{' '}
        <Button color="link">link</Button>
</div>
```

Outline Buttons:

```jsx
    <div>
         <Button outline color="primary">primary</Button>{' '}
         <Button outline color="secondary">secondary</Button>{' '}
         <Button outline color="success">success</Button>{' '}
         <Button outline color="info">info</Button>{' '}
         <Button outline color="warning">warning</Button>{' '}
         <Button outline color="danger">danger</Button>
       </div>
```

Sizes:

```jsx
   <Button color="primary" size="lg">Large Button</Button>{' '}
   <Button color="secondary" size="lg">Large Button</Button>
```

Full width:


```jsx
 
<Button color="primary" size="lg" block>Block level button</Button>
<Button color="secondary" size="lg" block>Block level button</Button>
```