MD3 Components¶
Material Design 3's components, as Tesserae builds them. Each page says what the component is in MD3, how Tesserae builds it (the YAML), how to use it, and links to its stylesheet. The tree on the left opens and closes by group.
Actions¶
| Component | Fragments |
|---|---|
| Buttons | ButtonFilled, ButtonFilledTonal, ButtonElevated, ButtonOutlined, ButtonText |
| Button groups | ButtonGroup |
| Split buttons | SplitButtonFilled, SplitButtonFilledTonal, SplitButtonElevated, SplitButtonOutlined, SplitButtonText |
| Icon buttons | IconButtonStandard, IconButtonFilled, IconButtonFilledTonal, IconButtonOutlined |
| Floating action buttons | FabPrimary, FabSecondary, FabTertiary, FabSurface |
| Extended FABs | ExtendedFabPrimary, ExtendedFabSecondary, ExtendedFabTertiary, ExtendedFabSurface |
Communication¶
| Component | Fragments |
|---|---|
| Badges | BadgeDot, BadgeLabeled |
| Progress indicators | LinearProgress, CircularProgress, LoadingIndicator |
| Snackbars | Snackbar |
| Tooltips | Tooltip |
Containment¶
| Component | Fragments |
|---|---|
| Cards | CardElevated, CardFilled, CardOutlined |
| Dialogs | Dialog |
| Dividers | Divider |
| Lists | ListItem |
| Side sheets | SideSheetStandard, SideSheetModal |
| Accordions | AccordionHeader |
| Trees | TreeNodeBranch, TreeNodeLeaf |
Navigation¶
| Component | Fragments |
|---|---|
| Navigation rail | NavigationRail, NavigationRailItem, NavigationRailScreens, NavigationRailScreen |
| Navigation drawer | NavigationDrawer, NavigationDrawerItem |
| Top app bar | TopAppBar |
| Tabs | Tabs, TabsItem |
| Menus | Menu, MenuItem |
| Search | SearchBar, SearchView |
| Toolbars | ToolbarDocked, ToolbarFloating |
| Links | Link |
Selection and input¶
| Component | Fragments |
|---|---|
| Checkbox | Checkbox |
| Radio button | RadioButton |
| Switch | Switch |
| Slider | Slider |
| Chips | ChipAssist, ChipFilter, ChipFilterSelected, ChipInput, ChipSuggestion |
| Text fields | widget: TextField |
| Spin box | SpinBox |
| Date picker | DatePickerDay, DatePickerDayToday, DatePickerDaySelected, DatePickerDayOutsideMonth |
| Time picker | TimePickerDial, PeriodSelectorAM, PeriodSelectorPM |
| Segmented buttons | widget: SegmentedButton |
| Time input | Python only |
Content¶
| Component | Fragments |
|---|---|
| Text | Text |
| Images | Image |
| SVG | kind: Svg |
| Video | Video |
| Carousel | widget: Carousel |
| Pagination | widget: Pagination |
Beyond MD3¶
| Component | Fragments |
|---|---|
| Status bar | StatusBar |
| Node graph | NodeGraph |
| Splitter | Python only |
Windows and docking¶
| Component | Fragments |
|---|---|
| Window | Python only |
| Title bar | Python only |
| Dock | Python only |
| Dock panel | Python only |
| Routed views | Python only |