Origami Frontend Components & Services

Readme: ft-concept-button

A special button used around ft.com when performing actions on concepts.


Check out how to include Origami components in your project to get started with ft-concept-button.


Concept pill

    class="ft-concept-button ft-concept-button--standard"
    <button aria-pressed="false" class="ft-concept-button__button">Movies</button>

Follow button

    class="ft-concept-button ft-concept-button--follow ft-concept-button--standard"
    data-ft-concept-button-pressed-text="Signed up"
    data-ft-concept-button-unpressed-text="Sign up"
    data-ft-concept-button-aria-live-pressed-text="Now signed up"
    data-ft-concept-button-aria-live-unpressed-text="No longer signed up"
    <div class="ft-concept-button__announcement" aria-live="assertive"></div>
    <button aria-pressed="false" class="ft-concept-button__button">
        Sign up

FT follow button

This one has a little plus or a tick icon. You'd be advised to include the data-ft-concept-button-aria-live-pressed-text and data-ft-concept-button-aria-live-unpressed-text options so screenreader users are informed that a change has occurred.

    class="ft-concept-button ft-concept-button--follow ft-concept-button--standard"
    data-ft-concept-button-aria-live-pressed-text="Now following movies on my FT"
    data-ft-concept-button-aria-live-unpressed-text="No longer following movies on my FT"
    data-ft-concept-button-aria-label-pressed-text="Stop following movies on my FT"
    data-ft-concept-button-aria-label-unpressed-text="Follow movies on my FT"
    <div class="ft-concept-button__announcement" aria-live="assertive"></div>
    <button aria-pressed="false" type="submit" class="ft-concept-button__button">


import ConceptButton from "@financial-times/ft-concept-button";


The options accepted by the constructor are as follows:

ariaPressedText :: the text to announce to screenreaders when the button state changes to pressed
ariaUnpressedText :: the text to announce to screenreaders when the button state changes to unpressed
ariaLabelText :: the button aria abel to set when the button state changes to pressed
ariaLabelText :: the button aria label to set when the button state changes to unpressed
pressedText :: the text content of the button to set when the button state changes to pressed
unpressedText :: the text content of the button to set when the button state changes to unpressed


You can set the pressed state (which will also update the labels and announce the new state to screenreaders) like this:

conceptButton.isPressed = true;

You can check the pressed state by reading conceptButton.isPressed.


Users with a React-compatible runtime aren't expected to load the Origami JavaScript at all, and are expected instead to take care of the labels and pressed state by themselves.

The provided .tsx template sets the button type to submit, so you can wrap a form around it and add any required business logic in the onSubmit.

You can attach a click handler to the button by passing an onClick function inside extraButtonProps.

The stories should provide some guidance here.


export interface ConceptButtonProps {
    // button text
    label: string;
    // text to announce to screenreaders
    ariaLiveText?: string;
    // descriptive label for button
    ariaLabel?: string;
    // button theme
    theme?: 'standard' | 'inverse' | 'opinion' | 'monochrome';
    // button type (the follow type has an icon)
    type?: 'concept' | 'follow';
    // whether the button is currently pressed
    pressed?: boolean;
    // for props that aren't appropriate in Origami
    extraButtonProps: any;
Switch component view

GitHub: ft-concept-button@1.0.2

Install ft-concept-button

If using the Build Service, add ft-concept-button@^1.0.2 to your script and link tags.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/ft-concept-button@^1.0.2".

Help & Support

ft-concept-button is maintained directly by the Origami team. If you have any questions about ft-concept-button or Origami in general, we are happy to help. 😊

Slack: #origami-support
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: #origami-support
Email: origami.support@ft.com