Button
The Button component provides a reusable pattern for button in the interface.
Buttons of type basic
The basic button has no background or border. The text color is determined by the color property. This button also lacks padding left and right.
Buttons of type outlined
Outlined buttons consist of a border colored by the color property. The content(icon/text) will also be colored by the color property.
Type filled
Buttons with type filled and in three different colors.
Buttons with both text and icon
You can choose to have both text and an icon. You can also switch positions of the text and icon by setting reverse to true.
Button with icon only
This is a button with only an icon. This is the only button that will be rendered as a square.
Button with icon only - sizes
Size
Different sizes ranging from sm to lg
Size with icons
Different sizes ranging from sm to lg with icons
Disabled buttons
A button with the data-attribute disabled set to true will be greyed out and cursor set to not-allowed.
Togglebuttons
When pressing a toggle-button the text color will go from black to primary to indicate it being toggled.
Basic buttons
Filled buttons
Outline buttons
Togglebuttons with interchangable labels and icons
When pressing a toggle-button label and/or the icon will be changed to indicate the action.
Toggle buttons with interchangable labels & icons
Type
Use the type attribute to help define the action of the button.
Pill-shaped buttons
By setting the pill attribute to true, the button will have a border-radius of 9999px, making it pill-shaped.
API
| Parameter | Default | Description |
|---|---|---|
|
text
|
false | The text-content of a button. |
|
size
|
md | The size of the button; sm, md, lg. |
|
color
|
default | The color scheme for the button. |
|
type
|
button | What button type. |
|
style
|
filled | The type of appearance, can be basic, filled or outlined. |
|
shape
|
normal | If the shape of the button should be normal, or fully rounded (pill style). |
|
href
|
false | Where should the button link to? |
|
target
|
_top | Open a new tab or not? |
|
componentElement
|
button | The tag to use for this component. |
|
labelElement
|
span | The element containing the label. |
|
ripple
|
true | Enable / disable ripple on click. |
|
pressed
|
false | - |
|
toggle
|
false | Will toggle the color of the font. |
|
icon
|
false | The name of the icon. |
|
reversePositions
|
false | Reverse the position of icon and text. |
|
fullWidth
|
false | Makes button full width. |
|
classListIcon
|
[] | Array of classes placed on the icon |
|
classListText
|
[] | Array of classes placed on the text |
|
ariaLabel
|
Aria label text for the button | |
|
disableColor
|
true | To use or not to use the disabled color even if the button is disabled |
CSS API
| Variable | Default | Type | Values | Description |
|---|---|---|---|---|
|
--c-button--base
|
var(--base) | range | - | Main unit that drives radius and spacing scales. |
|
--c-button--border-radius
|
var(--border-radius) | range | - | Border Radius |
|
--c-button--border-width
|
var(--border-width) | range | - | Size |
|
--c-button--space
|
var(--space) | range | - | Base spacing unit. Used for padding and margin inside components. |
|
--c-button--outer-space
|
var(--outer-space) | range | - | Spacing between components. Use --space for spacing inside components. |
|
--c-button--color--primary
|
var(--color--primary) | color | - | Primary |
|
--c-button--color--secondary
|
var(--color--secondary) | color | - | Secondary |
|
--c-button--color--surface
|
var(--color--surface) | color | - | Surface |
|
--c-button--font-weight-medium
|
var(--font-weight-medium) | select | 400, 500, 600, 700 | Medium Weight |
|
--c-button--font-family-base
|
var(--font-family-base) | font | - | Body Font |
|
--c-button--color--surface-contrast
|
var(--color--surface-contrast) | color | - | Used for text and icons on surface backgrounds with less contrast. |
|
--c-button--shadow-color
|
var(--shadow-color) | rgba | - | Shadow Color |
|
--c-button--shadow-amount
|
var(--shadow-amount) | range | - | Multiplier for elevation shadows. 0 = none, 1 = default. |
|
--c-button--color--primary-contrast
|
var(--color--primary-contrast) | color | - | Primary Contrast |
|
--c-button--color--primary-border
|
var(--color--primary-border) | color | - | Manual companion token for primary border and hover states. |
|
--c-button--color--primary-alt
|
var(--color--primary-alt) | color | - | Manual companion token for subtle primary surfaces. |
|
--c-button--color--secondary-contrast
|
var(--color--secondary-contrast) | color | - | Secondary Contrast |
|
--c-button--color--secondary-border
|
var(--color--secondary-border) | color | - | Manual companion token for secondary border and hover states. |
|
--c-button--color--secondary-alt
|
var(--color--secondary-alt) | color | - | Manual companion token for subtle secondary surfaces. |
|
--c-button--color--surface-border
|
var(--color--surface-border) | color | - | Manual companion token for borders on surface elements. |
|
--c-button--color--surface-alt
|
var(--color--surface-alt) | color | - | Manual companion token for subtle surface backgrounds. |
|
--c-button--corner-shape
|
var(--corner-shape) | select | square, round, squircle, circular, bevel, scoop | Corner Shape |
|
--c-button--color--surface-contrast-muted
|
var(--color--surface-contrast-muted) | color | - | Derived muted contrast for text and icons on surface backgrounds. |
|
--c-button--font-size-90
|
var(--font-size-90) | range | - | One step below base in the type scale. |
|
--c-button--font-size-100
|
var(--font-size-100) | range | - | Base font size. |
|
--c-button--font-size-200
|
var(--font-size-200) | range | - | One step above base in the type scale. Equivalent to h6/subtitle. |