Skip to main content

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.

Examples

Open in new window
<duet-button variation="primary">Primary button</duet-button>

<script>
// Select the above button
var button = document.querySelector("duet-button")

// Listen for clicks in the button
button.addEventListener("click", function(e) {
console.log("Button clicked", e)
})

// Listen for focus in the button
button.addEventListener("duetFocus", function(e) {
console.log("Focus detected", e)
})

// Listen for blur in the button
button.addEventListener("duetBlur", function(e) {
console.log("Blur detected", e)
})
</script>
Open in new window
<duet-button variation="primary" icon="navigation-arrow-left" fixed>
With icon on left
</duet-button>
Open in new window
<duet-button variation="primary" icon="navigation-arrow-right" fixed icon-right>
With icon on right
</duet-button>
Open in new window
<duet-button
padding="none"
margin="none"
variation="plain"
icon="action-arrow-left-small"
icon-size="small"
fixed>

Previous
</duet-button>

<duet-spacer direction="horizontal" size="x-large"></duet-spacer>

<duet-button
padding="none"
margin="none"
variation="plain"
icon="action-arrow-right-small"
icon-right
icon-size="small"
fixed>

Next
</duet-button>
Open in new window
<duet-button variation="loading">
Button
</duet-button>
Open in new window
<duet-button variation="primary" expand>
Expand button
</duet-button>
Open in new window
<duet-button variation="secondary">
Secondary button
</duet-button>
Open in new window
<duet-button>Default button</duet-button>
Open in new window
<duet-button variation="negative">
Negative button
</duet-button>
Open in new window
<duet-button variation="destructive">
Destructive button
</duet-button>
Open in new window
<duet-button disabled>
Disabled button
</duet-button>
Open in new window
<duet-button variation="plain" icon="navigation-arrow-left">
Plain button
</duet-button>
Open in new window
<duet-button
padding="none"
margin="none"
variation="plain"
icon="action-arrow-down-small"
icon-size="small"
icon-right
fixed>

Show more
</duet-button>

<br/>

<duet-button
padding="none"
margin="none"
variation="plain"
icon="action-arrow-up-small"
icon-size="small"
icon-right
fixed>

Show less
</duet-button>

Properties #

Property Attribute Description Type Default
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
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 false
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
accessiblePressed accessible-pressed Tells screen reader the element is pressed. 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. 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. Can be one of: "small", "medium", "large". string "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
margin margin Controls the margin of the component. Can be one of: "auto", "none". string "auto"
padding padding Controls the padding of the component. Can be one of: "auto", "none". string "auto"
submit submit Allows the button to submit a form. boolean false
theme theme Theme of the button. Can be one of: "default", "turva". string ""
url url A destination to link to, rendered in the href attribute of a link. string undefined
variation variation Style variation of the button. Can be one of: "default", "primary", "secondary", "negative", "loading", "destructive", "plain". string "default"
wrapping wrapping Controls the text wrapping. Can be one of: "auto", "none". string "auto"

Events #

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

Methods #

setFocus() => Promise<void> #

Sets focus on the specified duet-button. Use this method instead of the global
button.focus().

Returns #

Type: Promise<void>

Dependencies #

Used by #

Depends on #

Graph #

graph TD;
duet-button --> duet-spinner
duet-header --> duet-button
duet-hero --> duet-button
duet-modal --> duet-button
style duet-button fill:#f9f,stroke:#333,stroke-width:4px

Integration

For integration, event and theming guidelines, please see Using Components. This documentation explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.



Tutorials

Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:

Tutorials

Building Layouts

Tutorials

Server Side Rendering


Troubleshooting

If you experience any issues while using a component, please head over to the Support page for more guidelines and help.