# Button Updated

Buttons are a key part of any user interface. They naturally lead the user through pages and provoke interaction.

## Magic Buttons

Magic has several different button styles. Unlike typical elements, they are not styled with Magic Colours. Colours for buttons are described below.

### Simple button

A simple button can be made with a <button> tag or an <a> tag. As with many other frameworks, the class name for buttons is simply btn . A simple button is made with the following code:

    <button class="btn">Text</button>
    <!--or-->
    <a class="btn">Text</a>

However, this will not render a finished result:

To make it complete, we need to pick a style and a colour.

### Styles

Buttons have three different styles, each with different colours: filled, outline and gradient:

### Filled buttons

To make a filled button, simply add the class btn-X, where X is a standard Magic Colour.

    <button class="btn btn-default">Default</button>
    <button class="btn btn-blue">Blue</button>
    <button class="btn btn-red">Red</button>
    <button class="btn btn-green">Green</button>
    <button class="btn btn-yellow">Yellow</button>
    <button class="btn btn-dark">Dark</button>
    <button class="btn btn-light">Light</button>

Buttons only support standard Magic colours. By standard colour, we mean all colours except those appended by -lighten or -darken-X, i.e. only default, red, blue, green, yellow, dark or light, but not default-darken-1, etc.

### Outline buttons

To make a button outlined, just add the class btn-outline:

    <button class="btn btn-outline btn-default">Default</button>
    <button class="btn btn-outline btn-blue">Blue</button>
    <button class="btn btn-outline btn-red">Red</button>
    <button class="btn btn-outline btn-green">Green</button>
    <button class="btn btn-outline btn-yellow">Yellow</button>
    <button class="btn btn-outline btn-dark">Dark</button>
    <button class="btn btn-outline btn-light">Light</button>

### Gradient buttons

These gradient buttons are completely different from all other buttons, and take different colours (but look quite nice):

    <button class="btn-grad btn-grad-red">Red</button>
    <button class="btn-grad btn-grad-blue">Blue</button>
    <button class="btn-grad btn-grad-green">Green</button>

### Button sizes

You can also make buttons larger or smaller, to fit into some scenarios:

    <button class="btn btn-default btn-large">Large</button>
    <button class="btn-grad btn-grad-red btn-large">Large</button>

    <button class="btn btn-default">Normal</button>
    <button class="btn-grad btn-grad-red">Normal</button>

    <button class="btn btn-default btn-small">Small</button>
    <button class="btn-grad btn-grad-red btn-small">Small</button>

### Fluid buttons

In some cases, you may wish to make your button fill 100% of the container's width, with the btn-fluid class:

    <button class="btn btn-default btn-fluid">Fluid</button>
    <button class="btn btn-default btn-outline btn-fluid">Fluid</button>
    <button class="btn-grad btn-grad-green btn-fluid">Fluid</button>

### Disabled buttons

Magic also styles disabled buttons. You can make a button disabled with the typical syntax of adding the attribute disabled to the button:

    <button class="btn btn-default">Enabled</button>
    <button class="btn" disabled>Disabled</button>

`<a>` tags do not support the `disabled` attribute. Use the class '`btn-disabled`' instead:

    <a class="btn btn-disabled" href="#">Disabled</a>

Please note that this uses `pointer-events:none; tab-index:-1;` to disabled input. However, it is not as 'disabled' as a button would be. For more information, see this CSS Tricks article about pointer-events.

### Button groups

If you have a control panel with similar buttons, you can use Magic to group them. This only works for filled buttons (not outline or gradient).

#### Horizontal

Button groups have two variations: horizontal and vertical. This is how to lay out a horizontal button group:

New Save Load

    <div class="btn-group">
      <a href="#" class="btn btn-blue">New</a>
      <a href="#" class="btn btn-blue">Save</a>
      <a href="#" class="btn btn-blue">Load</a>
    </div>

See? Super simple!

You can add as many buttons as you like into a button group and they will scale automatically.

##### Fluid horizontal buttons

You can make horizontal button groups fluid, too. Just add the fluid class name. This will make the buttons have an equal width, and fill 100% of the width of their container:

New Save Load

    <div class="btn-group fluid">
      <a href="#" class="btn btn-blue">New</a>
      <a href="#" class="btn btn-blue">Save</a>
      <a href="#" class="btn btn-blue">Load</a>
    </div>

If you try to fit too many buttons into a group, they will wrap to the next line:
Button Button Button Button Button Button Button Button Button Button Button Button

This also works for vertical button groups.

#### Vertical

In some cases, you may wish to make a vertical button group. This is simple - just add the class vertical to the group:

New Save Load

    <div class="btn-group vertical">
      <a href="#" class="btn btn-blue">New</a>
      <a href="#" class="btn btn-blue">Save</a>
      <a href="#" class="btn btn-blue">Load</a>
    </div>

The width of the entire group adjusts to the widest button automatically:

New Document Save Load

##### Fluid vertical buttons

As mentioned above, vertical buttons can be fluid too. Use the same syntax (just add the fluid) class:

New Save Load

#### Icons

As button groups are intended to be used as toolbox components, they work well with FontAwesome.com icons. Just use their normal syntax:

    <div class="btn-group">
      <a href="#" class="btn btn-blue"><i class="fas fa-file"></i></a>
      <a href="#" class="btn btn-blue"><i class="fas fa-save"></i></a>
      <a href="#" class="btn btn-blue"><i class="fas fa-folder-open"></i></a>
      <a href="#" class="btn btn-blue"><i class="fas fa-share"></i></a>
    </div>