Button Ready

Buttons are used for interface actions. They default to appearance that has dark text with gray border. Primary style should be used only once per view for main call-to-action.

Users generally expect buttons to submit data or take action, and for links to navigate. If navigation is required for the button, use the url prop. The control will then output an anchor styled as a button, instead of an HTML button.

Property	Attribute	Description	Type	Default
`accessibleActiveDescendant`	`accessible-active-descendant`	Indicates the id of a related component’s visually focused element.	`string`	`undefined`
`accessibleControls`	`accessible-controls`	Use this property to add an aria-controls attribute to the button. Use the attribute to point to the unique id of the content that the button manages.	`string`	`undefined`
`accessibleDescribedBy`	`accessible-described-by`	Indicates the id of a component that describes the button.	`string`	`undefined`
`accessibleDescription`	`accessible-description`	Aria description the button	`string`	`undefined`
`accessibleDetails`	`accessible-details`	Details of the component	`string`	`undefined`
`accessibleExpanded`	`accessible-expanded`	If a button expands or collapses adjacent content, then use the ariaExpanded prop to add the aria-expanded attribute to the button. Set the value to convey the current expanded (true) or collapsed (false) state of the content.	`boolean`	`undefined`
`accessibleLabel`	`accessible-label`	Adds accessible label for the button that is only shown for screen readers. Typically, this label text replaces the visible text on the button for users who use assistive technology.	`string`	`undefined`
`accessibleLabelExternal`	`accessible-label-external`	Adds accessible label for tooltip that is shown in external link (url & external have both been set)	`string`	`getLocaleString(this.accessibleLabelExternalDefaults)`
`accessibleLabelExternalDefaults`	`accessible-label-external-default`	Property to change accessibleLabelExternal defaults on the component. normally you would handle these strings on an application level and override accessibleLabelExternal when needed	`DuetLangObject \| string`	`DuetStringsExternalDefaults`
`accessibleLabelLoading`	`accessible-label-loading`	Adds accessible label for button in "loading" state	`string`	`getLocaleString(this.accessibleLabelLoadingDefaults)`
`accessibleLabelLoadingDefaults`	`accessible-label-loading-default`	Property to change accessibleLabelLoading defaults on the component. normally you would handle these strings on an application level and override accessibleLabelLoading when needed	`DuetLangObject \| string`	`DuetStringsLoadingDefaults`
`accessibleLabelledBy`	`accessible-labelled-by`	String of id's that indicate alternative labels elements	`string`	`undefined`
`accessibleOwns`	`accessible-owns`	Indicates the id of a component owned by the button.	`string`	`undefined`
`accessiblePopup`	`accessible-popup`	Use this property to add an aria-haspopup attribute to a button, if you are using it as a menu button.	`string`	`"false"`
`accessiblePressed`	`accessible-pressed`	Tells screen reader the element is pressed.	`boolean`	`undefined`
`centerText`	`center-text`	Centers the text of a button	`boolean`	`false`
`color`	`color`	Custom color to be used for text, as a design token entered in camelCase or kebab-case. Example: "color-primary".	`string`	`""`
`disabled`	`disabled`	Makes the button component disabled. This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies.	`boolean`	`false`
`expand`	`expand`	Expands the button to fill 100% of the container width.	`boolean`	`false`
`external`	`external`	Forces URL to open in a new browser tab. Used together with URL prop.	`boolean`	`false`
`fixed`	`fixed`	Keep the button fixed width even on mobile viewports.	`boolean`	`false`
`icon`	`icon`	Icon to display to the left of the button content. This is ignored/overridden when button is used as an external link.	`string`	`""`
`iconOnly`	`icon-only`	Whether this button should use styles meant for displaying just an icon.	`boolean`	`false`
`iconRight`	`icon-right`	Show icon on the right side of the button content.	`boolean`	`false`
`iconSize`	`icon-size`	Icon size.	`"large" \| "medium" \| "medium-small" \| "small"`	`"medium"`
`identifier`	`identifier`	Adds a unique identifier for the button. Please note that with this particular component this id is added inside Shadow DOM. If you need an id on the html element, use regular id attribute instead.	`string`	`undefined`
`language`	`language`	[DEPRECATED] this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing	`"en" \| "fi" \| "sv"`	`getLanguage()`
`loading`	`loading`	Loading state of the button	`boolean`	`false`
`margin`	`margin`	Controls the margin of the component.	`"auto" \| "none"`	`"auto"`
`name`	`name`	The name of the button, which gets paired with the button's value when submitted as part of a form. Corresponds with the native HTML name attribute.	`string`	`undefined`
`negative`	`negative`	Negative variation, can be combined with Variation to produce negative versions	`boolean`	`false`
`padding`	`padding`	Controls the padding of the plain variation button - has no effect for other variations.	`"auto" \| "none"`	`"auto"`
`size`	`size`	Button’s size.	`"medium" \| "small" \| "x-small"`	`"medium"`
`submit`	`submit`	Allows the button to submit a form.	`boolean`	`false`
`theme`	`theme`	Theme of the button.	`"" \| "default" \| "turva"`	`""`
`url`	`url`	A destination to link to, rendered in the href attribute of a link.	`string`	`undefined`
`value`	`value`	The value of the button, which gets paired with the button's name when submitted as part of a form. Corresponds with the native HTML value attribute.	`string`	`undefined`
`variation`	`variation`	Style variation of the button.	`"default" \| "destructive" \| "destructive-primary" \| "destructive-secondary" \| "input-button-embedded" \| "input-button-primary" \| "input-button-secondary" \| "negative" \| "plain" \| "primary" \| "secondary" \| "square"`	`"default"`
`wrapping`	`wrapping`	Controls the text wrapping.	`"auto" \| "none"`	`"auto"`

Event	Description	Type
`duetBlur`	Emitted when the button loses focus.	`CustomEvent<any>`
`duetFocus`	Emitted when the button has focus.	`CustomEvent<any>`

Name	Purpose
`default`	Default style is the most common button variation. Only switch to another variation if you need to adjust the visual weight of the element. Please note that the default style uses transparent background so that it works nicely on Duet’s light background gradients.
`primary`	Primary style is reserved for the view’s main call-to-action. Should be used only once per view, e.g. for a submit action at the end of a form. This style also works on top of dark background or images.
`secondary`	Secondary style should be used for secondary actions in a view. Most commonly used when there is already a primary action and we want to highlight another action with a different style.
`negative`	Negative style is meant for dark backgrounds and to be used on top of illustrations.
`destructive`	Destructive style should be used for actions that delete data or otherwise make it hard to revert the action.
`plain`	Used for less important or less common actions.
`disabled`	Used for actions that aren’t currently available or not available anymore.
`loading`	Used to indicate progress when a button has been pressed and the action is still processing.

Examples #

Properties #

Events #

Methods #

setFocus(options?: FocusOptions) => Promise<void> #

Parameters #

Returns #

Usage #

When to use #

When not to use #

Variations #

Accessibility #

Additional considerations #

Integration

Tutorials

Building Layouts

Using CLI Tools

Creating Custom Patterns

Server Side Rendering

Sharing Prototypes

Usage With Markdown

Troubleshooting

`setFocus(options?: FocusOptions) => Promise<void>` #