# Button

## Styles

<div class="example">
    <button class="gs-o-button gs-o-button--primary">Primary Button</button>
    <button class="gs-o-button gs-o-button--secondary">Secondary Button</button>
    <button class="gs-o-button gs-o-button--clear">Clear Button</button>
    <button class="gs-o-button gs-o-button--white">White Button</button>
    <button class="gs-o-button gs-o-button--my-bbc">My BBC Button</button>
    <button class="gs-o-button gs-o-button--share">Share Button</button>
</div>

```html
<button class="gs-o-button gs-o-button--primary">Primary Button</button>
<button class="gs-o-button gs-o-button--secondary">Secondary Button</button>
<button class="gs-o-button gs-o-button--clear">Clear Button</button>
<button class="gs-o-button gs-o-button--white">White Button</button>
<button class="gs-o-button gs-o-button--my-bbc">My BBC Button</button>
<button class="gs-o-button gs-o-button--share">Share Button</button>
```

## Sizes

<div class="example">
    <button class="gs-o-button gs-o-button--primary">Regular Button</button>
    <button class="gs-o-button gs-o-button--secondary">Regular Button</button>
</div>

```html
<button class="gs-o-button gs-o-button--primary">Regular Button</button>
<button class="gs-o-button gs-o-button--secondary">Regular Button</button>
```

<div class="example">
    <button class="gs-o-button gs-o-button--primary gs-o-button--big">Big Button</button>
    <button class="gs-o-button gs-o-button--secondary gs-o-button--big">Big Button</button>
</div>

```html
<button class="gs-o-button gs-o-button--primary gs-o-button--big">Big Button</button>
<button class="gs-o-button gs-o-button--secondary gs-o-button--big">Big Button</button>
```

<div class="example">
    <button class="gs-o-button gs-o-button--primary gs-o-button--full">Full Button</button>
    <button class="gs-o-button gs-o-button--secondary gs-o-button--full">Full Button</button>
</div>

```html
<button class="gs-o-button gs-o-button--primary gs-o-button--full">Full Button</button>
<button class="gs-o-button gs-o-button--secondary gs-o-button--full">Full Button</button>
```

## Borders

<div class="example">
    <button class="gs-o-button gs-o-button--border gs-o-button--white">White Button</button>
    <button class="gs-o-button gs-o-button--border gs-o-button--secondary">Secondary Button</button>
</div>

```html
<button class="gs-o-button gs-o-button--border gs-o-button--white">White Button</button>
<button class="gs-o-button gs-o-button--border gs-o-button--secondary">Secondary Button</button>
```

## Disabled state

<div class="example">
    <button class="gs-o-button gs-o-button--disabled gs-o-button--primary">Primary Button</button>
    <button class="gs-o-button gs-o-button--disabled gs-o-button--secondary">Secondary Button</button>
</div>

```html
<button class="gs-o-button gs-o-button--disabled gs-o-button--primary">Primary Button</button>
<button class="gs-o-button gs-o-button--disabled gs-o-button--secondary">Secondary Button</button>
```

<link rel="stylesheet" href="https://bbc.github.io/grandstand/assets/css/grandstand-latin-flexbox-4.1.0.enhanced.css">