`

JavaScript

`js
import ConceptButton from '@financial-times/ft-concept-button';
`

$3

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

$3

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

`js
conceptButton.isPressed = true;
`

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

React

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.

$3

`ts
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'
| 'inverse-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;
}
``

Migration

| State | Major Version | Last Minor Release | Migration guide |
| :----------: | :-----------: | :----------------: | :---------------------------------------------------: |
| ⚠ maintained | 2 | N/A | migrate to v2 |
| ╳ deprecated | 1 | 1.3 | N/A |