Skip to main content
LocalTapiola Turva

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>
  var button = document.querySelector("duet-button")
  button.addEventListener("click", function(e) {
    console.log("Button clicked", e)
  })
  button.addEventListener("duetFocus", function(e) {
    console.log("Focus detected", e)
  })
  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 #

PropertyAttributeDescriptionTypeDefault
accessibleControlsaccessible-controlsUse this prop 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.stringundefined
accessibleExpandedaccessible-expandedIf 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.booleanfalse
accessibleLabelaccessible-labelAdds 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.stringundefined
accessiblePressedaccessible-pressedTells screen reader the element is pressed.booleanfalse
colorcolorCustom color to be used for text, as a design token entered in camelCase or kebab-case. Example: "color-primary".string""
disableddisabledMakes the button component disabled. This prevents users from being able to interact with the button, and conveys its inactive state to assistive technologies.booleanfalse
expandexpandExpands the button to fill 100% of the container width.booleanfalse
externalexternalForces URL to open in a new browser tab. Used together with URL prop.booleanfalse
fixedfixedKeep the button fixed width even on mobile viewports.booleanfalse
iconiconIcon to display to the left of the button content.string""
iconRighticon-rightShow icon on the right side of the button content.booleanfalse
iconSizeicon-sizeIcon size. Can be one of: "small", "medium", "large".string"medium"
identifieridentifierAdds a unique identifier for the button.stringundefined
marginmarginControls the margin of the component. Can be one of: "auto", "none".string"auto"
paddingpaddingControls the padding of the component. Can be one of: "auto", "none".string"auto"
submitsubmitAllows the button to submit a form.booleanfalse
themethemeTheme of the button. Can be one of: "default", "turva".string""
urlurlA destination to link to, rendered in the href attribute of a link.stringundefined
variationvariationStyle variation of the button. Can be one of: "default", "primary", "secondary", "negative", "loading", "destructive", "plain".string"default"

Events #

EventDescriptionType
duetBlurEmitted when the button loses focus.CustomEvent<any>
duetFocusEmitted when the button has focus.CustomEvent<any>

Dependencies #

Used by #

Depends on #

Graph #

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

Integration

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