mtrlDocumentation
How to start, how mtrl works in your framework, and every component's configuration, methods and events.
Guides
Getting startedmtrl is a Material Design 3 component library for the web, with no dependencies.Architecturemtrl is built in layers: small features compose into component factories, web components wrap the factories, and the React, Vue, Svelte and SolidJS components are generated from the web components.VanillaThe factories are mtrl itself: one function per component, which builds its DOM and returns an object to drive it.Web Componentsmtrl/elements has every component as a custom element: <m-switch>, <m-tabs>, <m-dialog>.Reactmtrl/react has a React component for every element: Switch renders <m-switch>, Tabs renders <m-tabs>.Vuemtrl/vue has a Vue 3 component for every mtrl web component, for Vue 3.3 or later and Nuxt.Sveltemtrl/svelte has a Svelte 5 component for every mtrl web component, for Svelte apps and SvelteKit.SolidJSmtrl/solid has a SolidJS component for every mtrl web component, for Solid 1.8 or later and SolidStart.ThemingA theme in mtrl is a set of CSS custom properties: one per Material 3 colour role, named --mtrl-sys-color-<role>.Server renderingmtrl's components are built in the browser: a web component builds its factory inside its shadow root when it upgrades, and a factory needs document.
Actions
ButtonA button lets people take an action with one tap: save, send, add to cart.Icon buttonAn icon button is a button whose whole label is its icon: for an action people recognize without words, where space is tight, as in a toolbar, an app bar or media controls.Button groupA button group is a row, or a column, of buttons that belong together: a formatting toolbar, a set of views, a unit picker.Split buttonA split button pairs one action with a button that opens more choices: Save, with "Save a copy" behind the chevron; Send, with "Schedule send".FABA floating action button (FAB) carries the one action a screen is for: compose, add, start.Extended FABAn extended FAB is a floating action button with a label: for a screen's primary action where an icon alone would be a guess, such as "Compose" or "Add to cart".
Selection & input
CheckboxA checkbox lets people select one or more items from a list, or turn one item on or off in a form that is saved later.SwitchA switch turns one setting on or off, with an immediate effect: Wi-Fi, notifications, dark theme.Radio buttonsRadio buttons let people select one option from a set, when every option should be visible at once.ChipsChips are compact elements that stand for one discrete thing.SliderA slider lets people choose a value, or a range of values, along a track: a volume, a brightness, a price range.Text fieldA text field lets people enter free-form text: a name, an email address, a password, a paragraph.SelectA select lets people choose one option from a list, in a text field that opens a menu: a country, a role, a sort order.SearchSearch lets people enter a keyword or phrase and find what they are looking for.Date pickerA date picker lets people select a date, or a range of dates.Time pickerA time picker asks for a time of day, on a clock dial or by typing it, in a modal dialog: a meeting, an alarm, a delivery window.
Navigation
Navigation railA navigation rail holds three to seven top-level destinations in a column along the side of a medium or expanded window.DrawerA navigation drawer holds an app's top-level destinations in a vertical list along one edge, with dividers and section labels to group them.TabsTabs organize related content at the same level, one view at a time.MenuA menu shows a list of choices on a temporary surface, opened from a button or another control: an overflow menu, a context menu, the choices behind an icon button.Top app barA top app bar shows the current screen's title, a navigation button and the screen's most important actions.Bottom app barA bottom app bar puts a screen's frequent actions within thumb reach on a phone: a row of icon buttons and, often, a FAB.
Containment
CardA card groups the content and actions about one subject on one surface: a title, media, supporting text and buttons.ListA list is a continuous, vertical index of text and images: a headline per row, with an overline, supporting text, and leading and trailing content such as an icon, an avatar or a time.CarouselA carousel shows a collection of items that scroll on and off the screen, changing size as they move and settling into place: artwork, photos, featured entries, to browse rather than read in full.DividerA divider is a thin line that groups content in lists and containers: between sections of a list, or between a card's body and its actions.DialogA dialog asks for a decision, or holds a short task, before anything else continues: discard a draft, confirm a deletion, pick a ringtone.Bottom sheetA bottom sheet holds secondary content anchored to the bottom of the screen: sharing options, filters, the details of a place on a map.Side sheetA side sheet holds content that supports the page, docked to its side: filters beside a list of results, the details of a selected item.
Communication
BadgeA badge shows a count or a status on another element: unread messages on an icon, a new item in a navigation bar.ProgressA progress indicator shows how far a process has come, such as an upload, or that one is running when its length is unknown.Loading indicatorA loading indicator shows a short wait, between 200ms and 5 seconds, for content that is loading or refreshing.SnackbarA snackbar tells people about something the app has done, at the bottom of the screen: a message archived, a photo saved.TooltipA tooltip is a short label for another element, shown on hover and on focus: it names an icon button, or says what a control does, in a few words.
Additional references
FormA form builds a set of fields from a layout, and keeps their data: it reads and sets it, knows when it has changed, validates it and submits it.ColorpickerA color picker lets people choose a color: in an area of saturation and brightness, on a hue slider, by hex value, from swatches or with an eyedropper.Segmented buttonA segmented button is one container split into two to five segments, each an option: a view switcher, a sort order, a set of filters.