Components ​

Components are interactive building blocks for creating a user interface. They can be organized into categories based on their purpose: Action, containment, communication, navigation, selection, and text input.

Action ​

• Common button
• Floating action button
• Icon button
• Segmented button

Communication ​

• Snackbar

Progress indicators can be achieved with VueUse's useNProgress.

Badges are considered part of their parent element and thus not listed.

Containment ​

• Bottom sheet (to be implemented)
• Card
• Carousel (to be implemented)
• Dialog
• Side sheet (to be implemented)
• Tooltip

Dividers and lists are considered trivial to implement for one's own application, and not included.

Navigation ​

• Bottom app bar
• Navigation bar
• Navigation drawer
• Navigation rail
• Search (to be implemented)
• Tabs (to be implemented)
• Top app bar

Selection ​

• Checkbox
• Chip (to be implemented)
• Date picker (to be implemented)
• Menu
• Radio button (to be implemented)
• Slider (to be implemented)
• Switch
• Time picker (to be implemented)

Additionally, a Select component is provided, which is not technically a first-level component of the spec, but is nevertheless present.

A Combobox component is to be implemented.

Text input ​

• Text field