Orbit UI

Component gallery

All 23 Orbit components with live demos, anatomy, token references and copy-ready markup. Filter by category or search the docs.

■
Buttons

Button

Filled, tonal, outlined and text buttons for the highest-emphasis actions.

■
Buttons

Icon button

Compact icon actions in standard, filled, tonal and outlined variants.

■
Buttons

FAB

Floating Action Button promotes the primary action of a screen.

■
Buttons

Extended FAB

A wider FAB with a text label for actions that need more context.

■
Buttons

Segmented button

Connected button group for mutually exclusive or related options.

✉
Communication

Snackbar

Transient bottom notification with an optional action.

✉
Communication

Badge

Small status descriptor for navigation icons and avatars.

✉
Communication

Progress

Linear and circular indicators for ongoing processes.

▦
Containment

Card

Surface that groups related content and actions.

▦
Containment

Dialog

Modal surface for critical decisions and focused input.

▦
Containment

Tooltip

Short informative text shown on hover or long-press.

▦
Containment

Carousel

Scrolling item layout with hero and compact layouts.

✎
Navigation

Navigation bar

Bottom navigation between three and five top-level destinations.

✎
Navigation

Navigation rail

Side navigation for medium-width app layouts.

✎
Navigation

Tabs

Horizontal content switcher with primary and secondary styles.

✎
Navigation

Menu

Anchored list of actions or options.

✓
Selection

Checkbox

Multi-select control with tristate support.

✓
Selection

Chip

Compact element for filters, input and suggestions.

✓
Selection

Switch

Two-state toggle for immediate settings changes.

✓
Selection

Slider

Continuous or discrete value selection along a track.

✓
Selection

Radio button

Single-select control for small option sets.

⌨
Text inputs

Text field

Filled and outlined inputs with labels, icons and support text.

⌨
Text inputs

Search

Search bar with an expandable view for complex queries.