Button

We're hiring!Are you enthusiastic about software development and business requirements? And would you like to be part of a journey aiming at placing Tryg as the top insurance company in the Nordics?

Ads by Tryg Careers

Installation

Usage

Variants

Disabled

Pass the disabled prop to display disabled state of button.

Loading

Pass the loading prop to display a Spinner component inside the button.

Icon

You can add icons to the AnchorButton by passing the icon prop and adjust its position with icon-placement prop.

Accessibility

Button has role of button.
Keyboard event support for Space and Enter keys.
Mouse and touch event handling, and press state management.
Keyboard focus management and cross browser normalization.

We recommend to read this blog post about the complexities of building buttons that work well across devices and interaction methods.

API

Properties

Property	Attribute	Description	Type	Default
`disabled`	`disabled`	Set whether or not the button should be disabled NB! This should be rarely be used as it's a potential accessibility issue. Disabled buttons are ignored by screen readers and keyboard navigation.	`boolean`	`false`
`icon`	`icon`	Set an icon to be displayed on the button	`string`	`undefined`
`iconPlacement`	`icon-placement`	Set the position of the icon on a button with an icon	`"left" \| "none" \| "right"`	`'none'`
`loading`	`loading`	Set the Button state to loading to display a spinner icon	`boolean`	`false`
`onDark`	`on-dark`	Set to true if the Button is displayed on dark background	`boolean`	`false`
`text`	`text`	Set a text to be displayed in the content slot of the button	`string`	`undefined`
`type`	`type`	Set the type of button	`"button" \| "reset" \| "submit"`	`'button'`
`uuid`	`uuid`	Give this instance of button a custom ID, or keep the default.	`string`	`uuidv4()`
`variant`	`variant`	Set the variant of the button	`"primary" \| "secondary" \| "tertiary"`	`'primary'`

CSS Custom Properties

Name	Description
`--background-color`	DEPRECATED: kept for backwards compatibility, but will be removed by August 2024
`--background-color-primary`	DEPRECATED: kept for backwards compatibility, but will be removed by August 2024
`--background-color-secondary`	DEPRECATED: kept for backwards compatibility, but will be removed by August 2024
`--background-color-tertiary`	DEPRECATED: kept for backwards compatibility, but will be removed by August 2024
`--border-width`	DEPRECATED: kept for backwards compatibility, but will be removed by August 2024
`--button-background-color`	Set the background color.
`--button-background-color-hover`	Set the background color on hover
`--button-background-color-pressed`	Set the background color on press
`--button-background-color-primary`	Set the primary background color.
`--button-background-color-secondary`	Set the secondary background color.
`--button-background-color-tertiary`	Set the tertiary background color.
`--button-border-color`	Set the border color of the anchor-button
`--button-border-width`	Set the border width of the anchor-button
`--button-bottom-left-radius`	Set the bottom-left radius of the button.
`--button-bottom-right-radius`	Set the bottom-right radius of the button.
`--button-gap-icon-text`	Set the gap between icon and text.
`--button-icon-color`	Set the icon color.
`--button-line-height`	Set the line height.
`--button-text-color`	Set the text color.
`--button-top-left-radius`	Set the top-left radius of the button.
`--button-top-right-radius`	Set the top-right radius of the button.
`--button-width`	Set the width.
`--gap-icon-text`	DEPRECATED: kept for backwards compatibility, but will be removed by August 2024
`--icon-color`	DEPRECATED: kept for backwards compatibility, but will be removed by August 2024
`--line-height`	DEPRECATED: kept for backwards compatibility, but will be removed by August 2024
`--text-color`	DEPRECATED: kept for backwards compatibility, but will be removed by August 2024
`--width`	DEPRECATED: kept for backwards compatibility, but will be removed by August 2024

Dependencies

Depends on

Graph

graph TD;
  anchor-button --> anchor-spinner
  anchor-button --> anchor-icon
  style anchor-button fill:#f9f,stroke:#333,stroke-width:4px

On this page