Origami Frontend Components & Services

SassDoc: o-buttons

oButtons(opts)

Output o-buttons classes.

parameter type default description
opts

Examples

Example #1

default o-buttons styles.

@include oButtons();

Example #2

and secondary button classes, plus the big button modifier class.

@include oButtons($opts: (
    'types': ('primary', 'secondary'),
    'sizes': ('big')
));

Example #3

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'),
    'themes': ('inverse'),
    'icons': ('arrow-left', 'arrow-right')
));

Example #4

button classes, plus classes to support button groups and pagination.

@include oButtons($opts: (
    'types': ('secondary'),
    'pagination': true,
    'groups': true
));

Links

oButtonsGetColor(...)

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.

Returns

Color - The hex colour for a button property.

Examples

Example #1

background: oButtonsGetColor($state: 'default', $property: 'color', $type: 'primary');

Example #2

background: oButtonsGetColor($state: 'hover', $property: 'border', $type: 'secondary');

Links

oButtonsAddTheme(...)

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 master 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.

Examples

Example #1

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')
);

Example #2

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')
);

Example #3

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')
);

Links

oButtonsContent(...)

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).

Examples

Example #1

a primary button with right arrow.

.my-button {
    @include oButtonsContent($opts: (
        'type': 'primary',
        'icon': 'arrow-right'
    ));
}

Example #2

a primary button with a custom lemon theme.

.my-lemon-button {
    @include oButtonsContent($opts: (
        'type': 'primary',
        'theme': ('color': 'lemon')
    ));
}

Example #3

base button styles.

Links

o-buttons-is-silent

Silent mode: on (true) or off (false) Set to false to output default button classes

Links

oButtons(opts)

Output o-buttons classes.

parameter type default description
opts

Examples

Example #1

default o-buttons styles.

@include oButtons();

Example #2

and secondary button classes, plus the big button modifier class.

@include oButtons($opts: (
    'types': ('primary', 'secondary'),
    'sizes': ('big')
));

Example #3

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'),
    'themes': ('inverse'),
    'icons': ('arrow-left', 'arrow-right')
));

Example #4

button classes, plus classes to support button groups and pagination.

@include oButtons($opts: (
    'types': ('secondary'),
    'pagination': true,
    'groups': true
));

Links

Support Status
active
Switch component view

GitHub Repository

Install o-buttons

If using the Build Service, add o-buttons@^6.0.3 to your link tag.

If running a Manual Build, run bower install --save "o-buttons@^6.0.3".

Help & Support

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

Feedback / Issues

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