Buttons are a key part of any user interface. They naturally lead the user through pages and provoke interaction.
Magic has several different button styles. Unlike typical elements, they are not styled with Magic Colours. Colours for buttons are described below.
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.
Buttons have three different styles, each with different colours: filled, outline and gradient:
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>
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>
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>
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>
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>
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.
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).
Button groups have two variations: horizontal and vertical. This is how to lay out a horizontal button group:
<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.
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:
<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>
This also works for vertical button groups.
In some cases, you may wish to make a vertical button group. This is simple - just add the class vertical to the group:
<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:
As mentioned above, vertical buttons can be fluid too. Use the same syntax (just add the fluid) class:
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>