Components
A component is a part with a material, a state or a behavior of the platform: a native element with one stylesheet. Install the package once, then copy the markup from any page below. Arrange them with the layouts, compose them into blocks and frame them as pages.
Materials
- SurfaceTrays, sheets and wells: the material ladder every component is built on.
- CardA raised sheet whose parts follow the room the card is given.
- TicketA sheet with a tear line: a pass, a coupon, a receipt and its stub.
- PileSeveral things shown as one, with the edges of the others under it.
- DividerOne hairline between sections, with an optional label.
Layouts
- ArrangementsStack, cluster, split and center: the four moves most layouts are made of.
- Auto gridAs many equal columns as fit, counted by the grid itself.
- BentoTiles of a few sizes fitted into one box, in columns that follow its room.
- MasonryTiles of their own heights, packed into lanes with no gaps under them.
- BreakoutA reading column that a figure or a band can step out of, wider or to the edges.
- Sticky stackPanels that pile up under one another as the page scrolls.
- FormThe rhythm of a form: rows, sections and actions that follow their column.
Structure
- Scroll areaA scrolling region whose edges fade where content continues.
- SplitterTwo panes and the handle between them that sets how they share the space.
- SwipeA row that slides aside to show what can be done to it.
- RevealContent that arrives as it scrolls into view.
- AccordionNative details rows that open to their own height.
- ExpandA long text that shows its first lines and opens on request.
Actions
Forms
- InputText fields cut into the surface, with labels, hints, errors and groups.
- SelectA native select whose option list is drawn in the same material.
- ComboboxA text field that opens a listbox of matches.
- ListboxA list of options, the surface a combobox and a command palette open.
- CheckboxA small native well that fills with ink when checked.
- RadioA small round well for one choice among several.
- SwitchA pearl thumb that slides onto ink for settings that apply at once.
- SliderA native range input: a thin well with a pearl thumb.
- RangeTwo values on one track, with ink between them.
- Segmented controlA few options in one well; a sheet glides to the current one.
- ChipA small pill that is a filter or a removable value.
- SwatchA color to look at or to pick, as a disc with a finished edge.
- ChoiceA radio or checkbox option large enough to explain itself.
- PollA question, a few answers, and how the votes fell once one is chosen.
- ScaleOne answer on a row of numbers, from one end to the other.
- ChecklistA short list of things to do that counts how many are done.
- RatingA score out of a few stars, as native radios.
- DropzoneA wide target for choosing or dropping files.
- OTPA short code typed one character to a slot.
- KeypadThe keys of a phone, for a code or an amount typed with a thumb.
- StepperA number between the two buttons that step it.
- WheelA value picked by turning a column until it rests under a mark.
- ComposerWhere a message or a prompt is written: a growing field over a row of tools.
- CalendarA month of days to pick from, with ranges.
Navigation
- TabsWords on one hairline, the current one underlined in ink.
- NavbarThe bar at the top of a page, which takes its material once content scrolls under it.
- Tab barThe main destinations of a small-screen app, along the bottom edge.
- NavA vertical list of destinations for a sidebar.
- TreeNested rows for things that contain things.
- Table of contentsThe headings of a page as links, with the section in view marked by CSS.
- BreadcrumbThe path to the current page as a list of links.
- PaginationThe pages of a long list, as a row of links.
- PagerThe page before and the page after, at the foot of an article.
- StepsWhere a reader is in a short sequence.
- Skip linkThe first link of a page, shown while it has focus, that jumps past the navigation.
Overlays
- DialogA native modal on an overlay sheet, opened and closed without script.
- LightboxA picture opened large over the page, in a native dialog.
- PopoverA floating sheet anchored to the button that opens it.
- MenuA list of actions in a popover, placed against its button.
- Command paletteA dialog that is one search field over a list of commands.
- TooltipA short label in ink, shown on hover, focus and long press.
Feedback
- ToastA brief message over the page that can leave by itself.
- AlertA message in the flow of the page, with an optional status.
- BannerOne line across the top of a page for news everyone on it should have.
- ProgressA thin well that fills with ink as work completes.
- SkeletonThe shape of content that is on its way.
- ShimmerWords that say work is under way, with light passing over them.
- CaretThe mark at the end of text that is still being written.
- SpinnerA fine ring for work of unknown duration.
- BusyA region whose content is being fetched again, under a veil and a spinner.
- FlashA ring that shows where a link has landed, then fades.
- EmptyWhat a view shows when it has nothing to show yet.
Data display
- TableRows of data on hairlines, with sortable headings and aligned figures.
- Data listThe facts about one thing, as terms and values.
- StatOne figure, what it measures and how it moved.
- PriceWhat something costs, set the way a price is read.
- ChartA few numbers as bars, drawn by the stylesheet from a list.
- BreakdownA whole as its parts along one bar, each as wide as its share.
- HeatmapMany small numbers as a field of cells, each as dark as its value.
- UptimeHow a service has been, one tick to a day.
- TimelineEvents in the order they happened.
- GanttThings that last, as bars on one scale of time.
- TraceWhat an agent or a job did, step by step, each a quiet line that opens its detail.
- MeterA measurement within a known range.
- GaugeA reading on a dial: an arc that fills as far as the value has come.
Media
- FigureAn image or a video with its caption, finished at the edge.
- HotspotPoints on a picture that say what is there.
- CarouselA row of slides that scrolls and snaps, built from CSS alone.
- MarqueeA row that passes by without end, and stops when you look closely.
- CompareTwo pictures of the same thing, and a handle that draws the line between them.
- WindowThe frame of an application around a screenshot, a demo or a terminal.
- DeviceThe body of a phone around a screenshot, a video or a running demo.
Content
- ListRows of things with media, words and something at the end.
- FileOne file as a thing with a name: an attachment, an upload or a download.
- MessageOne turn of a conversation, as a bubble that points at its author.
- ThreadComments and their replies, each joined by a line to the comment it answers.
- AvatarA person or a team as a photo or initials, alone or stacked.
- BadgeA small chip for a status, a category or a count.
- IconSize inline icons through the component that holds them.
Typography
- HeadingA title in the ink of the page, with the line over it and the paragraph under it.
- QuoteWords that belong to someone else, set apart from yours.
- BulletsA list in running text, with its markers hung in a column of their own.
- MarkA stroke of highlighter over the words that matter.
- RevisionWords added and words struck, inside the sentence they change.
- MentionA person, a team or a thing named inside a sentence.
- CitationA small numbered mark in a sentence that points at its source.
- CodeLiteral text in the mono face, inline or as a block.
- KbdA keycap for shortcuts in text and menus.