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.
<div
class="ft-concept-button ft-concept-button--standard"
data-o-component="ft-concept-button"
>
<button aria-pressed="false" class="ft-concept-button__button">Movies</button>
</div><div
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"
data-o-component="ft-concept-button"
>
<div class="ft-concept-button__announcement" aria-live="assertive"></div>
<button aria-pressed="false" class="ft-concept-button__button">
Sign up
</button>
</div>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.
<div
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"
data-o-component="ft-concept-button"
>
<div class="ft-concept-button__announcement" aria-live="assertive"></div>
<button aria-pressed="false" type="submit" class="ft-concept-button__button">
Movies
</button>
</div>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;
}