Output o-buttons classes.
| parameter | type | default | description |
|---|---|---|---|
| opts |
default o-buttons styles.
@include oButtons();and secondary button classes, plus the big button modifier class.
@include oButtons($opts: (
'types': ('primary', 'secondary', 'ghost'),
'sizes': ('big')
));and secondary button classes, plus an inverse theme modifier class, and classes for arrow left and arrow right icon buttons.
@include oButtons($opts: (
'types': ('primary', 'secondary', 'ghost'),
'themes': ('inverse'),
'icons': ('arrow-left', 'arrow-right')
));button classes, plus classes to support button groups and pagination.
@include oButtons($opts: (
'types': ('secondary', 'ghost'),
'pagination': true,
'groups': true
));Gets the color of a button property for a given theme and state.
| parameter | type | default | description |
|---|---|---|---|
| state | |||
| property | |||
| type | |||
| theme | A theme string or a custom theme map. |
background: oButtonsGetColor($state: 'default', $property: 'color', $type: 'primary');background: oButtonsGetColor($state: 'hover', $property: 'border', $type: 'secondary');Styles for a custom button theme .o-buttons--[$name].
| parameter | type | default | description |
|---|---|---|---|
| name | A theme name e.g. `my-special-button`. | ||
| opts | A custom theme map with a `color` and optional `context` key. The context key indicates the background colour your button is placed on, it defaults to the page colour (paper for the core brand, white otherwise). See [the README](https://registry.origami.ft.com/components/o-buttons/readme) for more details. | ||
| types | The types of button to output the theme for e.g. ('primary', 'secondary'). | ||
| icons (optional) | null | The button icons to output for this theme. |
a new claret theme for both primary and secondary buttons.
// Outputs class .o-buttons--my-special-button
@include oButtonsAddTheme(
$name: 'my-special-button',
$opts: ('color': 'claret-80'),
$types: ('primary', 'secondary')
);a new claret theme to go on a slate background.
// Outputs class .o-buttons--my-special-button
@include oButtonsAddTheme(
$name: 'my-special-button',
$opts: ('color': 'claret-80', 'context': 'slate'),
$types: ('primary', 'secondary')
);a new claret theme for buttons with icons.
// Outputs class .o-buttons--my-special-button
@include oButtonsAddTheme(
$name: 'my-special-button',
$opts: ('color': 'claret-80'),
$types: ('primary', 'secondary'),
$icons: ('arrow-up', 'arrow-down')
);Create a single button with a custom class. To avoid duplicate CSS this is
not recommended unless o-buttons default classes cannot be used. See the
README for
more details.
Button CSS declarations without any selectors.
| parameter | type | default | description |
|---|---|---|---|
| opts (optional) | ('type': 'null', 'theme': null, 'size': null, 'icon': null, 'icon-only': false) | The kind of button styles to output. | |
| include-base-styles (optional) | true | Whether to include base button styles, shared by all buttons. | |
| include-base-icon-styles (optional) | true | Whether to include base icon button styles, shared by all icon buttons (defaults to true only when outputting an icon button). |
a primary button with right arrow.
.my-button {
@include oButtonsContent($opts: (
'type': 'primary',
'icon': 'arrow-right'
));
}a primary button with a custom lemon theme.
.my-lemon-button {
@include oButtonsContent($opts: (
'type': 'primary',
'theme': ('color': 'lemon')
));
}base button styles.
// output base button styles only
.my-button {
@include oButtonsContent($opts: ());
}
// output modifier classes for button types, without duplicating base styles
.my-button--secondary {
@include oButtonsContent($opts: (
'type': 'secondary'
), $include-base-styles: false);
}
.my-button--primary {
@include oButtonsContent($opts: (
'type': 'primary'
), $include-base-styles: false);
}Silent mode: on (true) or off (false) Set to false to output default button classes
Output o-buttons classes.
| parameter | type | default | description |
|---|---|---|---|
| opts |
default o-buttons styles.
@include oButtons();and secondary button classes, plus the big button modifier class.
@include oButtons($opts: (
'types': ('primary', 'secondary', 'ghost'),
'sizes': ('big')
));and secondary button classes, plus an inverse theme modifier class, and classes for arrow left and arrow right icon buttons.
@include oButtons($opts: (
'types': ('primary', 'secondary', 'ghost'),
'themes': ('inverse'),
'icons': ('arrow-left', 'arrow-right')
));button classes, plus classes to support button groups and pagination.
@include oButtons($opts: (
'types': ('secondary', 'ghost'),
'pagination': true,
'groups': true
));If using the Build Service, add o-buttons@^7.8.1 to your
link tag.
If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-buttons@^7.8.1".
o-buttons is maintained directly by the Origami team. If you have any questions about o-buttons or Origami in general, we are happy to help. 😊
Slack: #origami-support
Email: origami.support@ft.com
To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊
Slack: #origami-support
Email: origami.support@ft.com