Button group Applies styles to direct children
| parameter | type | default | description |
|---|---|---|---|
| ($o-buttons-class) | $buttonClass |
.my-button-group {
@include oButtonsGroup(my-buttons);
}Button construct Basic button styling and default states for specific theme and size
| parameter | type | default | description |
|---|---|---|---|
| size | (default) | ||
| theme | (secondary) |
styles
.my-button {
@include oButtons;
}theme
.my-inverse-button {
@include oButtons($theme: inverse);
}size
.my-big-button {
@include oButtons(big);
}size and theme
.my-big-standout-button {
@include oButtons(big, primary);
}Button theme construct Outputs styles for all button states
| parameter | type | default | description |
|---|---|---|---|
| theme |
.my-button--inverse {
@include oButtonsTheme($theme: 'inverse');
}.my-button--custom {
@include oButtonsTheme($theme: ($background: 'slate', $accent: 'lemon', $colorizer: 'primary'));
}Button size Outputs dimensions for a specific button size
| parameter | type | default | description |
|---|---|---|---|
| size |
.my-button--big {
@include oButtonsSize(big);
}Silent mode: on (true) or off (false) Set to false to output default button classes
Default button class used when $o-buttons-is-silent is true
Button font family
This is required to override default system form element styling,
since <input>, <button>… don't inherit global font styles
Button sizes, with their attached properties
Button themes Keys are a brand variant (@see _brand.scss). Values are used to output selectors e.g. ".o-buttons--primary.o-buttons--inverse".
List of icons to generate classes for icon buttons. Build service users will only be able to use these icons, but there is a mixin for people using this via Sass, meaning any icon in 'fticons' is available to those users. Icon names as used in fticons
$colorizer or $accent have been provided then the $theme map will be ignored.
The mixin "oButtonsIcon" is deprecated. This mixin has been deprecated
Icon Buttons
Outputs styles for every icon in o-buttons-icons at every theme in o-buttons-themes
| parameter | type | default | description |
|---|---|---|---|
| buttonClass | class to apply o-buttons styles to |
Get Button For Icon and Theme
Outputs background-image property for a given icon/theme at all states set in that theme's state list example: .my-button--left-arrow { @include oButtonsGetButtonForIconAndTheme(left-arrow, standout); }
| parameter | type | default | description |
|---|---|---|---|
| icon-name, | any icon name found in o-ft-icons | ||
| theme, | any theme name as defined in $o-buttons-themes or a custom theme map. | ||
| button-class, | defaults to o-buttons ($o-buttons-class' default value) |
The mixin "oButtonsBaseStyles" is deprecated. Use oButtonsIconBaseStyles
Base styling for buttons
| parameter | type | default | description |
|---|---|---|---|
| button-class, | defaults to o-buttons ($o-buttons-class' default value) |
Gets the color of a button property for a given theme and state.
| parameter | type | default | description |
|---|---|---|---|
| state | |||
| property | |||
| theme | A theme string/list or a custom theme map. Will default to the currently configured theme. |
Icon Button
Outputs the CSS properties for an icon button for the given icon, theme and size
| parameter | type | default | description |
|---|---|---|---|
| icon-name, | any icon name found in the fticons image set http://registry.origami.ft.com/components/fticons | ||
| size, | "big" or "default" | ||
| theme, | any theme name as defined in $o-buttons-themes (primary, secondary, etc) or a Map defining a custom theme. | ||
| is-icon-only, | if this icon has text accompaniment or is an icon only. |
Base styling for buttons
| parameter | type | default | description |
|---|---|---|---|
| button-class, | defaults to o-buttons ($o-buttons-class' default value) |
Icon Button Label
Where an icon button is used, a span with an informative text label in should be included so that if the styles don't load, the button will fallback to a text label. This solution also works well for screen readers. This mixin outputs the styles for visually hiding the label
Pagination button wrapper styles Applies styles of pagination buttons to direct children
| parameter | type | default | description |
|---|---|---|---|
| buttonClass | ($o-buttons-class) $buttonClass |
.my-buttons-pagination {
@include oButtonsPagination(my-buttons);
}Button construct Basic button styling and default states for specific theme and size
| parameter | type | default | description |
|---|---|---|---|
| size | (default) | ||
| theme | (secondary) |
styles
.my-button {
@include oButtons;
}theme
.my-inverse-button {
@include oButtons($theme: inverse);
}size
.my-big-button {
@include oButtons(big);
}size and theme
.my-big-standout-button {
@include oButtons(big, primary);
}If using the Build Service, add o-buttons@^5.15.1 to your
link tag.
Ensure the correct brand is set with a query parameter &brand=whitelabel.
If running a Manual Build, run npm install "o-buttons@^5.15.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: #ft-origami
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: #ft-origami
Email: origami.support@ft.com