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:

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>