o-buttons provides Sass mixins and variables to create buttons.
There are two types of buttons, primary buttons and secondary buttons.
<button class="o-buttons o-buttons--primary">Submit</button>
<button class="o-buttons o-buttons--secondary">Cancel</button>
o-buttons CSS will work on <button>
or <a>
elements. It is important for accessibility that if you intend to style an <a>
as a button, you give it the correct aria role.
A theme may be applied to a button to change its appearance. o-buttons provides some themes by default:
<button class="o-buttons o-buttons--primary o-buttons--inverse">Submit</button>
<button class="o-buttons o-buttons--secondary o-buttons--inverse">Cancel</button>
Sass users may create custom themes.
Any button may be made larger using the o-buttons--big
modifier class.
<button class="o-buttons o-buttons--primary o-buttons--big">Click Me</button>
To add an icon to your button add the class o-buttons-icon
and o-buttons-icon--{icon-name}
to your button.
Sass users may output any icon from the fticons set. However if you're using the Build Service a limited number of button icons are available. Limiting the number of icons keeps the CSS bundle smaller, but if you need an icon button that we don't currently support then please contact the Origami team:
<button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-down">Down Arrow</button>
<button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--download">Download</button>
If you would like your button to display only an icon, add the class o-buttons-icon--icon-only
and provide a visually hidden label for screen-reader users with o-buttons-icon__label
.
<button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-down o-buttons-icon--icon-only">
<span class="o-buttons-icon__label">
Down Arrow
</span>
</button>
Wrap buttons with .o-buttons-group
to group them together:
<div class="o-buttons-group">
<button class="o-buttons o-buttons--secondary" aria-selected="true">One</button>
<button class="o-buttons o-buttons--secondary">Two</button>
<button class="o-buttons o-buttons--secondary">Three</button>
</div>
For a pagination style wrap your buttons in .o-buttons-pagination
. In this example we show pages 1-3 and use icon buttons to indicate more and fewer results:
<div class="o-buttons-pagination">
<button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-left o-buttons-icon--icon-only" disabled="disabled">
<span class='o-buttons-icon__label'>Fewer results</span>
</button>
<button class="o-buttons o-buttons--secondary" aria-selected="true">1</button>
<button class="o-buttons o-buttons--secondary">2</button>
<button class="o-buttons o-buttons--secondary">3</button>
<button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-right o-buttons-icon--icon-only">
<span class='o-buttons-icon__label'>More results</span>
</button>
</div>
o-buttons
styles buttons with the disabled
attribute to show they are inactive. In some cases it is preferred to visually hide the button until it is active. For this case add the class o-buttons--hide-disabled
.
<!-- Visibly disabled because of the `disabled` attribute. -->
<button class="o-buttons" disabled>My Button</button>
<!-- Visually hidden because of the `disabled` attribute and `o-buttons--hide-disabled`.-->
<button class="o-buttons o-buttons--hide-disabled" disabled>My Button</button>
To output default o-buttons CSS make a single call to the primary mixin oButtons
. It is recommended that you pass an options map as the first argument to include only the button styles you need. Without the options map, all o-buttons styles are included.
@include oButtons($opts: (
'sizes': ('big'), // e.g .o-buttons--big
'types': ('primary', 'secondary'), // e.g .o-buttons--primary
'themes': ('mono', 'inverse', 'b2c'), // e.g .o-buttons--inverse
'icons': ('arrow-left', 'arrow-right', 'search'), // any fticons, e.g .o-buttons-icons.o-buttons-icons--search
'pagination': true, // .o-buttons-pagination
'groups': true // .o-buttons-group
));
To create a new button theme call oButtonsAddTheme
with the colour of your theme along with the types of buttons and icons you would like to use with your theme, if any.
o-buttons--{name}
.color
and context
./// .o-buttons--my-special-button
@include oButtonsAddTheme(
$name: 'my-special-button',
$opts: ('color': 'claret-80'),
$types: ('primary', 'secondary'),
$icons: ('arrow-up', 'arrow-down')
);
We recommend using o-buttons
markup as this encourages CSS reuse and smaller bundle sizes. If you are unable to update your markup to use o-buttons
classes, including those generated by oButtonsAddTheme
, use oButtonsContent
:
.my-button {
@include oButtonsContent($opts: ('type': 'primary'));
}
.my-icon-button {
@include oButtonsContent($opts: (
'type': 'primary',
'icon': 'arrow-right'
));
}
.my-lemon-button {
@include oButtonsContent($opts: (
'type': 'primary',
'theme': ('color': 'lemon')
));
}
oButtonsContent
has options to recreate all buttons, including for different sizes and icon only buttons. See the o-buttons SassDoc for more details and examples.
If you have any questions or comments about this component, or need help using it, please either raise an issue, visit #origami-support or email Origami Support.
This software is published by the Financial Times under the MIT licence.