Component API

Inputs

Autocomplete

Button

Type	Modifiers	Default	Description
Disabled	[disabled], .disabled	-	If applied, the button is disabled.
Icon-only	.icon-only	-	If applied, the button won't show its inner label.
Sizes	.small, .medium, .large	.medium	The size of the button.
Variants	.text, .outlined, .tonal, .filled, .elevated	.text	The variant to use.

Button group

Checkbox

Color

Date

File

Radio

Range

Search

Select

Textarea

Text input

Data display

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	&.danger, &.info, &.success, &.warning	-	Optional colors.
Variants	Default, .dot	Default	The variant to use.
Visibility	Default, .invisible	Default	Defines if the badges visibility.

Chip

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

Divider

List

Table

Tooltip

Typography

Feedback

Alert

Type	Modifiers	Default	Description
Children	& > .content, & > svg	-	Optional child content.
Severities	neutral, .danger, .info, .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

Surfaces

Accordion

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

Card

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