📄️ Breadcrumbs
List of links to allow users to navigate the page tree.
📄️ Button
Component for every call-to-action.
📄️ Buttons
Set automated and responsive spacing and wrapping behaviour for a list of Button components.
📄️ CardActions
Container for the card buttons. If there is one direct child, it will always be on the right side of the card. If there is two direct children, they will be placed on the left and right side.
📄️ CardContent
Repeatable element to add the card main content.
📄️ CardHeader
Contains the card title. You can add an optional label or subtitle. The font sizes are automatically set by the Card size prop.
📄️ CardMedia
Container for an image illustrating the card, for example on a list of blog posts.
📄️ Card
Wrapper for all card elements, one of the most common component in a UI.
📄️ Checkbox
Single checkbox component.
📄️ Checkboxes
Allow users to select multiple options from a list. This component uses the base structure of the Input component.
📄️ Divider
Line to separate content.
📄️ InputLabel
The content of a table component.
📄️ Input
Allow users to enter text that will fit on a single line. This is the most basic form field.
📄️ Link
Reference to a resource, either external (a link to a different website) or internal (a link to another page or document).
📄️ ListItem
Child of the List component.
📄️ List
Collection of related items.
📄️ NavBar
The header of the website, which includes the logo and navigation items.
📄️ NavItem
A single nav item, which can also include a dropdown list of NavItem.
📄️ Nav
Wrapper for a group of navigation items.
📄️ Radio buttons
Allow users to select one option from a list. This component uses the base structure of the Input component.
📄️ Radio
Single radio button component.
📄️ SectionContent
Child of the Section component to display content. You can have multiple SectionContent per Section.
📄️ SectionHeader
Child of the Section component. Each Section should have one SectionHeader component.
📄️ Section
Defines a section on a page. A section will always have one SectionHeader and at least one SectionContent child component.
📄️ Select
Allow users to select an option from a long list. This component uses the base structure of the Input component.
📄️ Status
Indicate the status of an object.
📄️ Switch
Allow user to toggle between two states.
📄️ Tab
Single tab item.
📄️ TableBody
The content of a table component.
📄️ TableCell
A single cell containing data in a table.
📄️ TableFooter
Pagination and filter component for a table.
📄️ TableHead
The header of a table with the column names.
📄️ TableRow
A row in a table.
📄️ Table
Display data in ordered rows and columns.
📄️ TabsControls
Container for the list of tab elements.
📄️ TabsPanel
Individual block of content displayed or hidden by navigating between tab items.
📄️ Tabs
Allow users to navigate between related blocks of content, showing one section at a time.
📄️ Tag
Small label representing data like a status or a property.
📄️ Textarea
Allow users to enter text on multiple lines. This component uses the base structure of the Input component.