Actions

Button

Type	Modifiers	Default	Description
Sizes	.small, default, .large	.medium	The size of the element.
Variants	default, .outlined, .tonal, .filled, .elevated	default	The variant to use.

Icon Button

Type	Modifiers	Default	Description
Sizes	.small	-	The size of the element.

Toggle button group

Type	Modifiers	Default	Description
Button children	& > button > svg/label, & > button.selected > svg + svg/label	-	Child content the buttons support.
Button size	.dynamic	-	If enabled all button widths are made to fit their respective content.
Sizes	default, .small, .x-small,	default	The size to use.

Inputs

Checkbox

Type	Modifiers	Default	Description
Children	.label, .supporting-text	-	Optional children.
Label position	.stack, default	default	If applied, the label is stacked under the element.
Sizes	.small, default, .large	default	The size of the element.
Validation	.error	-	When applied, error styles are shown.

Field group API

Type	Modifiers	Default	Description
Children	<legend>, .fields, .supporting-text, checkbox, radio, switch	-	Supported child elements.
Direction	column, .row	column	Decides which direction the inputs will be placed.
Disabled	[disabled]	-	When applied, disabled styles are shown.
Validation	.error	-	When applied, error styles are shown.

Radio

Type	Modifiers	Default	Description
Children	.label, .supporting-text	-	Optional children.
Label position	.stack, default	default	If applied, the label is stacked under the element.
Sizes	.small, default, .large	default	The size of the element.
Validation	.error	-	When applied, error styles are shown.

Field group API

Type	Modifiers	Default	Description
Children	<legend>, .fields, .supporting-text, checkbox, radio, switch	-	Supported child elements.
Direction	column, .row	column	Decides which direction the inputs will be placed.
Disabled	[disabled]	-	When applied, disabled styles are shown.
Validation	.error	-	When applied, error styles are shown.

Select

Field API

Type	Modifiers	Default	Description
Auto-fit	.auto-fit	-	When enabled, the element changes size depending on its content.
Children	.label, <input>, <select>, <textarea>, <datalist>, .supporting-text	-	Optional children.
Sizes	.small	-	The size of the element.
Validation	.error	-	When applied, error styles are shown.
Variants	outlined, .filled	outlined	The variant to use.

Switch

Type	Modifiers	Default	Description
Children	.label, .supporting-text	-	Optional children.
Sizes	.small, default	default	The size of the element.
Label position	.stack, default	default	If applied, the label is stacked under the Switch.
Validation	.error	-	When applied, error styles are shown.

Textarea

Field API

Type	Modifiers	Default	Description
Auto-fit	.auto-fit	-	When enabled, the element changes size depending on its content.
Children	.label, <input>, <select>, <textarea>, <datalist>, .supporting-text	-	Optional children.
Sizes	.small	-	The size of the element.
Validation	.error	-	When applied, error styles are shown.
Variants	outlined, .filled	outlined	The variant to use.

Text field

Field API

Type	Modifiers	Default	Description
Auto-fit	.auto-fit	-	When enabled, the element changes size depending on its content.
Children	.label, <input>, <select>, <textarea>, <datalist>, .supporting-text	-	Optional children.
Sizes	.small	-	The size of the element.
Validation	.error	-	When applied, error styles are shown.
Variants	outlined, .filled	outlined	The variant to use.

Data display

Accordion

Type	Modifiers	Default	Description
Anatomy	& > summary, & > .content, & > .actions	-	Optional wrappers for child content.
Variants	.text, .elevated, .tonal, .outlined,	.text	The variant to use.

Avatar

Type	Modifiers	Default	Description
Anatomy	& > summary, & > .content, & > .actions	-	Optional wrappers for child content.
Variants	default, .squared, .rounded	default	The variant to use.

Avatar group

Type	Modifiers	Default	Description
Children	Avatar	Avatar	Children
Spacing	default, .gap-small, .gap-x-small	default	The size to use.

Badge

Type	Modifiers	Default	Description
Alignment	.start-start, .start-end, .end-start, .end-end	.start-end	Where the badge should be placed over the child.
Color	.error, .ok, .good, .warning	-	Optional colors.
Variants	Default, .dot	Default	The variant to use.
Visibility	Default, .invisible	Default	Defines if the badges visibility.

Card

Type	Modifiers	Default	Description
Children	& > <hgroup>, & > .content, & > .actions	-	Optional wrappers for child content.
Variants	.text, .outlined, .tonal, .elevated	.text	The variant to use.

Chip

Type	Modifiers	Default	Description
Container	div.chip, a.chip, button.chip	-	Container element type.
Children	& > .text, & > svg	-	Optional child content.
Sizes	.small, default, .multiline	default	The size to use.
Variants	.tonal,.outlined	.tonal	The variant to use.

Definition list

Type	Modifiers	Default	Description
Bordered	default, &.dotted	-	Optional horizontal rule style

List

Type	Modifiers	Default	Description
Dense	ul.dense	-	When enabled list appears tighter packed
Gutterless	ul.gutterless	-	When enabled list inline padding is removed
Bordered	ul.bordered	-	When enabled a border is rendered on all list items

List item

Type	Modifiers	Default	Description
Main parts	li > .start, li > .text, li > .end	-	Building blocks in List item
Inset	li.inset	-	When enabled a list item without a start icon algins with items that do
Border top	li.border-top	-	When enabled the list item will get a top border

Table

Type	Modifiers	Default	Description
Dense	.dense	-	When applied the table will appear denser.
Sticky header	.sticky-header	-	When applied the table's <thead> will be sticky.

Tooltip

hej

Feedback

Alert

Type	Modifiers	Default	Description
Children	& > .content, & > svg	-	Optional child content.
Severities	neutral, .error, .ok, .warning	neutral	The severity to use.
Variants	.tonal, .outlined	.tonal	The variant to use.

Dialog

A <dialog> element on its own doesn't do much. It's recommended to use it in combination with the card component.

See Card API

Progress

Snackbar

Type	Modifiers	Default	Description
Absolute	.absolute, .visible	-	Optional classes needed for absolute positioning.
Actions	& > .actions > <action button> / <icon button>	-	Optional action.
Container	.snackbar	-	Container element.
Children	& > .content, & > .actions	-	Optional child content.
Position	.top-left, .top-center, .top-right, .bottom-left, .bottom-center, .bottom-right	.bottom-left	Determines where the Snackbar is positioned.

Spinner