Provider
Holds the theme, glass mode and accessibility settings the whole app shares.
Components
39 accessible glass components for Angular, each one live on its own stage.
Core
Surfaces
Surface
Raw glass on any element: frost, rim and lens, ready to shape into your own parts.
Panel
A frosted container in three shapes: a roomy panel, a compact card or a slim pill.
Avatar
A circular portrait with coloured initials as a fallback, a status dot and overlapping groups.
Kbd
Little glass keycaps for spelling out shortcuts.
Scroll Area
A scrolling region with a slim glass bar that appears only when you need it.
Controls
Button
A pressable slab of glass in four styles and three sizes, on a button or a link.
Input
A text field set into the glass, with an optional label and hint.
Checkbox
A tick box whose mark draws itself in, with a label, description and a mixed state.
Radio Group
A set of options where picking one clears the others.
Textarea
A multi-line field that can grow with what you type.
Select
A dropdown field whose choices float on a raised pane of glass.
Switch
An on/off toggle whose knob turns to clear glass under your finger.
Slider
Drag along a glass track to set a value or a range.
Segmented Control
A row of choices with a glass lozenge you can tap or drag between them.
Overlays
Dialog
A centred pane of glass that holds focus until you dismiss it.
Popover
A floating glass card pinned to whatever opened it.
Sheet
A glass panel that slides in from any edge; pull a bottom sheet down to close it.
Menu
An actions menu with shortcuts, toggles, choices and nested submenus.
Command
A quick-search palette that ranks commands as you type, inline or in a dialog.
Navigation
Header
A floating top bar that condenses as you scroll and folds its links into a menu on small screens.
Tabs
A pill of tabs whose glass bubble springs over to the one you pick. Press and it lifts into a lens that magnifies the tabs and slides under your finger.
Search
A glass search button that opens into a field, as on iOS: the field grows out of the button toward the start and its magnifying glass turns into a close mark. Use it in a header, a toolbar, a tab bar or anywhere else.
Bottom Bar
The bar at the bottom of an iOS app in one element: tabs from your data, a press lens and a search that opens beside them. Turn each part on or off.
Accordion
Stacked sections that fold open, singly or several together.
Dock
A shelf of app icons with running dots and labels that rise on hover.
Breadcrumb
A trail of links back to where you came from, folding long paths into an ellipsis.
Pagination
Page numbers with previous and next, condensing long ranges so the row stays short.
Feedback
Tooltip
A small hint that appears on hover or focus.
Toast
A short-lived glass note that slides in, announces itself and swipes away.
Badge
A tinted tag for statuses, counts and categories.
Progress
A bar that fills as work completes, or sweeps when the end is unknown.
Spinner
A turning ring that tells everyone, screen readers too, that something is on its way.
Skeleton
Soft glass placeholders that hold the shape of content still loading.
Alert
An inline message in four tones that can fold itself away when dismissed.