Xtimms/psu-schedule
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
e1a787c1dd6fac637aaf53bb55791afb0ec913fe
psu-schedule/.agents/skills/material-3/references/component-catalog.md
Zakhar Timoshenko e1a787c1dd made android client
2026-10-17 04:01:58 +03:00

27 KiB
Raw Blame History

MD3 Component Catalog

Complete reference for Material Design 3 components. Primary mappings: Jetpack Compose (androidx.compose.material3) where most users ship UIs today; web uses @material/web element names and imports — Material Web is maintenance-only.

Google I/O 2026 Component Updates

Material's I/O 2026 update highlights refreshed expressive guidance for lists, menus, search, and search app bars, with Jetpack Compose as the primary implementation path. When implementing these in Android:

  • Prefer current androidx.compose.material3 components and verify expressive APIs against the active Material3 BOM.
  • Expect expressive variants to include richer visual style, motion, and flexible configuration.
  • Treat web implementations as spec-aligned approximations unless Material Web exposes an equivalent component; Material Web remains maintenance-only.

Actions

Buttons

MD3 has 5 button types ordered by emphasis: Filled > Filled Tonal > Elevated > Outlined > Text.

General attributes (shared by all button types):

Attribute Type Description
disabled boolean Disables the button
href string Turns button into a link
target string Link target (_blank, etc.)
trailing-icon boolean Moves icon to trailing position
type string Form type: button, submit, reset

Filled Button

Element: md-filled-button | Import: @material/web/button/filled-button.js Use when: Primary action, highest emphasis.

<md-filled-button>Get started</md-filled-button>
<md-filled-button href="/signup">
  <md-icon slot="icon">arrow_forward</md-icon>
  Sign up
</md-filled-button>

Customize: --md-filled-button-container-color, --md-filled-button-label-text-color, --md-filled-button-container-shape, --md-filled-button-container-height

Filled Tonal Button

Element: md-filled-tonal-button | Import: @material/web/button/filled-tonal-button.js Use when: Medium emphasis, softer than filled. Secondary actions alongside a filled button.

<md-filled-tonal-button>Save draft</md-filled-tonal-button>

Customize: --md-filled-tonal-button-container-color, --md-filled-tonal-button-label-text-color

Elevated Button

Element: md-elevated-button | Import: @material/web/button/elevated-button.js Use when: Medium emphasis with shadow. Use on colored backgrounds where tonal button blends in.

<md-elevated-button>Add to cart</md-elevated-button>

Outlined Button

Element: md-outlined-button | Import: @material/web/button/outlined-button.js Use when: Medium emphasis, neutral. Good for secondary actions.

<md-outlined-button>Cancel</md-outlined-button>

Customize: --md-outlined-button-outline-color, --md-outlined-button-outline-width

Text Button

Element: md-text-button | Import: @material/web/button/text-button.js Use when: Lowest emphasis. Inline actions, dialog actions, less important options.

<md-text-button>Learn more</md-text-button>

Button Sizes (Expressive)

Buttons now support 5 sizes: extra-small, small (default), medium, large, extra-large. Set via CSS:

md-filled-button { --md-filled-button-container-height: 32px; } /* XS */
md-filled-button { --md-filled-button-container-height: 40px; } /* S (default) */
md-filled-button { --md-filled-button-container-height: 48px; } /* M */
md-filled-button { --md-filled-button-container-height: 56px; } /* L */
md-filled-button { --md-filled-button-container-height: 64px; } /* XL */

A11y: Buttons have built-in button role. Use aria-label when using icon-only buttons. Minimum touch target 48x48dp.

Button Group

Element: md-button-group | Import: @material/web/button/button-group.js Use when: Grouping related actions together with connected visual treatment.

<md-button-group>
  <md-outlined-button>Day</md-outlined-button>
  <md-outlined-button>Week</md-outlined-button>
  <md-outlined-button>Month</md-outlined-button>
</md-button-group>

FAB (Floating Action Button)

Element: md-fab | Import: @material/web/fab/fab.js Use when: The single most important action on a screen.

Attribute Type Description
size string small, medium (default), large
variant string surface, primary, secondary, tertiary
label string Text label (for extended FAB) 
<md-fab aria-label="Create new">
  <md-icon slot="icon">add</md-icon>
</md-fab>

<md-fab size="small" variant="tertiary" aria-label="Edit">
  <md-icon slot="icon">edit</md-icon>
</md-fab>

Customize: --md-fab-container-color, --md-fab-container-shape, --md-fab-icon-color A11y: Always provide aria-label since FABs are icon-only.

Extended FAB

Element: md-extended-fab | Import: @material/web/fab/extended-fab.js Use when: Primary action with explanatory text.

<md-extended-fab label="New message">
  <md-icon slot="icon">edit</md-icon>
</md-extended-fab>

Icon Button

Element: md-icon-button | Import: @material/web/iconbutton/icon-button.js

4 variants with separate elements:

Variant Element Import
Standard md-icon-button @material/web/iconbutton/icon-button.js
Filled md-filled-icon-button @material/web/iconbutton/filled-icon-button.js
Filled Tonal md-filled-tonal-icon-button @material/web/iconbutton/filled-tonal-icon-button.js
Outlined md-outlined-icon-button @material/web/iconbutton/outlined-icon-button.js
Attribute Type Description
toggle boolean Enables toggle behavior
selected boolean Selected state (when toggle) 
<md-icon-button aria-label="Settings">
  <md-icon>settings</md-icon>
</md-icon-button>

<!-- Toggle icon button (like/unlike) -->
<md-icon-button toggle aria-label="Favorite">
  <md-icon>favorite_border</md-icon>
  <md-icon slot="selected">favorite</md-icon>
</md-icon-button>

A11y: Always provide aria-label. Toggle buttons should have descriptive labels for both states.

Segmented Buttons

No @material/web element yet. Implement with standard HTML + MD3 tokens:

<div class="md3-segmented-buttons" role="group" aria-label="View options">
  <button class="md3-segmented-button md3-segmented-button--selected" aria-pressed="true">
    <md-icon>view_list</md-icon> List
  </button>
  <button class="md3-segmented-button" aria-pressed="false">
    <md-icon>grid_view</md-icon> Grid
  </button>
</div>

.md3-segmented-buttons {
  display: flex;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  overflow: hidden;
}
.md3-segmented-button {
  flex: 1;
  padding: 10px 16px;
  border: none;
  background: transparent;
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
  font: var(--md-sys-typescale-label-large);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.md3-segmented-button--selected {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

Communication

Badge

No @material/web element yet. Implement with CSS:

<div class="md3-badge-container">
  <md-icon>notifications</md-icon>
  <span class="md3-badge md3-badge--large">3</span>
</div>

.md3-badge-container { position: relative; display: inline-flex; }
.md3-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
  border-radius: var(--md-sys-shape-corner-full);
  font: var(--md-sys-typescale-label-small);
}
.md3-badge--small { width: 6px; height: 6px; padding: 0; } /* dot only */
.md3-badge--large { min-width: 16px; height: 16px; padding: 0 4px; text-align: center; }

Progress Indicator

Elements: md-linear-progress, md-circular-progress Import: @material/web/progress/linear-progress.js, @material/web/progress/circular-progress.js

Attribute Type Description
value number Current progress (0–1)
max number Maximum value (default 1)
indeterminate boolean Shows indeterminate animation
four-color boolean Four-color indeterminate variant 
<!-- Determinate -->
<md-linear-progress value="0.6"></md-linear-progress>
<md-circular-progress value="0.75"></md-circular-progress>

<!-- Indeterminate -->
<md-linear-progress indeterminate></md-linear-progress>
<md-circular-progress indeterminate></md-circular-progress>

Customize: --md-linear-progress-active-indicator-color, --md-circular-progress-active-indicator-color A11y: Has built-in progressbar role. Add aria-label for context (e.g., "Loading messages").

Snackbar

No @material/web element yet. Implement with standard HTML:

<div class="md3-snackbar" role="status" aria-live="polite">
  <span class="md3-snackbar__text">Message sent</span>
  <md-text-button class="md3-snackbar__action">Undo</md-text-button>
  <md-icon-button class="md3-snackbar__close" aria-label="Dismiss">
    <md-icon>close</md-icon>
  </md-icon-button>
</div>

.md3-snackbar {
  background: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
  border-radius: var(--md-sys-shape-corner-extra-small);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  max-width: 560px;
}

Tooltip

No @material/web element yet.

Two types:

  • Plain: Short text label, appears on hover/focus. Use for icon buttons and truncated text.
  • Rich: Multi-line with optional actions. Use for complex explanations.

Containment

Card

No @material/web element yet. Three variants:

Variant Appearance Elevation
Filled Surface-container-highest fill, no border Level 0
Outlined Surface fill, outline-variant border Level 0
Elevated Surface-container-low fill, shadow Level 1 
<!-- Outlined card -->
<div class="md3-card md3-card--outlined">
  <div class="md3-card__content">
    <h3 style="font: var(--md-sys-typescale-title-medium)">Title</h3>
    <p style="font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant)">
      Supporting text
    </p>
  </div>
  <div class="md3-card__actions">
    <md-filled-tonal-button>Action</md-filled-tonal-button>
  </div>
</div>

<!-- Filled card -->
<div class="md3-card md3-card--filled">...</div>

<!-- Elevated card -->
<div class="md3-card md3-card--elevated">...</div>

.md3-card {
  border-radius: var(--md-sys-shape-corner-medium, 12px);
  overflow: hidden;
}
.md3-card--outlined {
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
}
.md3-card--filled {
  background: var(--md-sys-color-surface-container-highest);
}
.md3-card--elevated {
  background: var(--md-sys-color-surface-container-low);
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
}
.md3-card__content { padding: 16px; }
.md3-card__actions { padding: 16px; display: flex; gap: 8px; justify-content: flex-end; }

Dialog

Element: md-dialog | Import: @material/web/dialog/dialog.js

Attribute Type Description
open boolean Shows the dialog
type string alert (default) 
<md-dialog id="confirm-dialog">
  <div slot="headline">Confirm action</div>
  <form slot="content" method="dialog">
    Are you sure you want to proceed?
  </form>
  <div slot="actions">
    <md-text-button form="confirm-dialog" value="cancel">Cancel</md-text-button>
    <md-filled-tonal-button form="confirm-dialog" value="confirm">Confirm</md-filled-tonal-button>
  </div>
</md-dialog>

A11y: Dialog traps focus automatically. Use slot="headline" for accessible title.

Bottom Sheet

No @material/web element yet. Two variants: Standard (persistent, coexists with content) and Modal (blocks interaction, has scrim).

Side Sheet

No @material/web element yet. Two variants: Standard (docked alongside content) and Modal (overlays content with scrim).

Divider

Element: md-divider | Import: @material/web/divider/divider.js

Attribute Type Description
inset boolean Adds inset on both sides
inset-start boolean Adds inset on start side
inset-end boolean Adds inset on end side 
<md-divider></md-divider>
<md-divider inset></md-divider>

Carousel

No @material/web element yet. Three configurations:

  • Multi-browse: Multiple items visible, scrollable
  • Uncontained: Items extend beyond viewport edges
  • Hero: One large featured item with smaller previews

Input

Checkbox

Element: md-checkbox | Import: @material/web/checkbox/checkbox.js

Attribute Type Description
checked boolean Checked state
indeterminate boolean Indeterminate state
disabled boolean Disabled state
required boolean Required for form validation 
<label>
  <md-checkbox></md-checkbox>
  Accept terms
</label>

<label>
  <md-checkbox checked></md-checkbox>
  Remember me
</label>

A11y: Wrap in <label> or use aria-label. Checkbox has built-in checkbox role.

Chips

Elements: md-chip-set, md-assist-chip, md-filter-chip, md-input-chip, md-suggestion-chip Import: @material/web/chips/*.js

Variant Element Use
Assist md-assist-chip Smart suggestions, shortcuts
Filter md-filter-chip Filtering content, multi-select
Input md-input-chip User input tokens (email recipients)
Suggestion md-suggestion-chip Suggested responses, queries 
<md-chip-set>
  <md-filter-chip label="Vegetarian" selected></md-filter-chip>
  <md-filter-chip label="Vegan"></md-filter-chip>
  <md-filter-chip label="Gluten-free"></md-filter-chip>
</md-chip-set>

<md-chip-set>
  <md-input-chip label="user@example.com" removable></md-input-chip>
</md-chip-set>

Menu

Elements: md-menu, md-menu-item, md-sub-menu Import: @material/web/menu/menu.js, @material/web/menu/menu-item.js

I/O 2026 note: Expressive menus have updated Material guidance for more flexible, vibrant configurations. In Jetpack Compose, prefer current Material3 menu APIs and expressive variants when available in your BOM. On web, use md-menu / md-menu-item for token-backed menus, or build custom spec-aligned variants when expressive behavior is required.

Attribute (menu) Type Description
anchor string ID of the anchor element
open boolean Shows the menu
positioning string absolute, fixed, popover 
<span style="position: relative;">
  <md-filled-button id="menu-trigger">Options</md-filled-button>
  <md-menu id="options-menu" anchor="menu-trigger">
    <md-menu-item>
      <div slot="headline">Edit</div>
      <md-icon slot="start">edit</md-icon>
    </md-menu-item>
    <md-menu-item>
      <div slot="headline">Delete</div>
      <md-icon slot="start">delete</md-icon>
    </md-menu-item>
  </md-menu>
</span>

<script>
  document.getElementById('menu-trigger').addEventListener('click', () => {
    document.getElementById('options-menu').open = !document.getElementById('options-menu').open;
  });
</script>

Radio Button

Element: md-radio | Import: @material/web/radio/radio.js

<div role="radiogroup" aria-label="Size">
  <label><md-radio name="size" value="s"></md-radio> Small</label>
  <label><md-radio name="size" value="m" checked></md-radio> Medium</label>
  <label><md-radio name="size" value="l"></md-radio> Large</label>
</div>

A11y: Group radios in a container with role="radiogroup" and aria-label.

Slider

Element: md-slider | Import: @material/web/slider/slider.js

Attribute Type Description
value number Current value
min number Minimum value
max number Maximum value
step number Step increment (makes discrete)
labeled boolean Shows value label
range boolean Enables range selection
value-start number Start value (range mode)
value-end number End value (range mode) 
<!-- Continuous -->
<md-slider value="50" min="0" max="100" aria-label="Volume"></md-slider>

<!-- Discrete with label -->
<md-slider value="3" min="1" max="10" step="1" labeled aria-label="Rating"></md-slider>

<!-- Range -->
<md-slider range value-start="20" value-end="80" min="0" max="100" aria-label="Price range"></md-slider>

Switch

Element: md-switch | Import: @material/web/switch/switch.js

Attribute Type Description
selected boolean On state
icons boolean Show on/off icons
disabled boolean Disabled state 
<label>
  <md-switch></md-switch>
  Dark mode
</label>

<label>
  <md-switch selected icons></md-switch>
  Notifications
</label>

Customize: --md-switch-selected-handle-color, --md-switch-selected-track-color

Text Field

Elements: md-filled-text-field, md-outlined-text-field Import: @material/web/textfield/filled-text-field.js, @material/web/textfield/outlined-text-field.js

Attribute Type Description
label string Label text
value string Current value
type string Input type (text, email, password, number, textarea, etc.)
placeholder string Placeholder text
required boolean Required validation
disabled boolean Disabled state
error boolean Error state
error-text string Error message
supporting-text string Helper text
prefix-text string Prefix text
suffix-text string Suffix text
max-length number Character limit (shows counter)
rows number Rows (for textarea) 
<!-- Outlined (recommended for most uses) -->
<md-outlined-text-field
  label="Email"
  type="email"
  required
  supporting-text="We'll never share your email">
</md-outlined-text-field>

<!-- Filled -->
<md-filled-text-field
  label="Search"
  type="text"
  placeholder="Type to search...">
  <md-icon slot="leading-icon">search</md-icon>
</md-filled-text-field>

<!-- With error -->
<md-outlined-text-field
  label="Password"
  type="password"
  error
  error-text="Password must be at least 8 characters"
  min-length="8">
</md-outlined-text-field>

<!-- Textarea -->
<md-outlined-text-field
  label="Message"
  type="textarea"
  rows="4"
  max-length="500">
</md-outlined-text-field>

Customize: --md-outlined-text-field-container-shape, --md-outlined-text-field-focus-outline-color, --md-filled-text-field-container-color

Jetpack Compose

Use OutlinedTextField / TextField from androidx.compose.material3. Prefer state-based APIs (TextFieldState, rememberTextFieldState()) when targeting current Material3 releases — see the package overview. Map labels, supporting text, and error state to MD3 roles (MaterialTheme.colorScheme, TextFieldDefaults).

// Illustrative — API names vary slightly by Material3 version
val state = rememberTextFieldState("")

OutlinedTextField(
    state = state,
    label = { Text("Email") },
    supportingText = { if (isError) Text("Invalid email") },
    isError = isError,
    modifier = Modifier.fillMaxWidth()
)

Date Picker

No @material/web element yet. Three configurations:

  • Docked: Inline calendar attached to input
  • Modal: Full dialog for date selection
  • Range: Select a date range

Time Picker

No @material/web element yet. Two configurations:

  • Docked: Inline time input
  • Modal: Clock dial in dialog

Navigation

App Bar (Top)

No @material/web element yet. Four variants:

Variant Height Title position Scroll behavior
Center-aligned 64dp Center Elevate on scroll
Small 64dp Left Elevate on scroll
Medium 112dp Left, bottom Collapse to small on scroll
Large 152dp Left, bottom Collapse to small on scroll

Jetpack Compose: TopAppBar, CenterAlignedTopAppBar, MediumTopAppBar, LargeTopAppBar, and expressive variants (e.g. large flexible) may require @OptIn(ExperimentalMaterial3ExpressiveApi::class) depending on BOM — check your material3 version.

<header class="md3-top-app-bar md3-top-app-bar--small">
  <md-icon-button aria-label="Menu"><md-icon>menu</md-icon></md-icon-button>
  <span class="md3-top-app-bar__title" style="font: var(--md-sys-typescale-title-large)">
    Page Title
  </span>
  <md-icon-button aria-label="Search"><md-icon>search</md-icon></md-icon-button>
  <md-icon-button aria-label="More"><md-icon>more_vert</md-icon></md-icon-button>
</header>

.md3-top-app-bar {
  height: 64px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}
.md3-top-app-bar__title { flex: 1; padding: 0 12px; }
/* Scrolled state */
.md3-top-app-bar--scrolled { background: var(--md-sys-color-surface-container); }

Navigation Bar

Element: md-navigation-bar | Import: @material/web/navigation/navigation-bar.js Use when: 3–5 primary destinations, mobile/compact screens, persistent.

<md-navigation-bar>
  <md-navigation-tab label="Home" active>
    <md-icon slot="active-icon">home</md-icon>
    <md-icon slot="inactive-icon">home</md-icon>
  </md-navigation-tab>
  <md-navigation-tab label="Explore">
    <md-icon slot="active-icon">explore</md-icon>
    <md-icon slot="inactive-icon">explore</md-icon>
  </md-navigation-tab>
  <md-navigation-tab label="Profile">
    <md-icon slot="active-icon">person</md-icon>
    <md-icon slot="inactive-icon">person</md-icon>
  </md-navigation-tab>
</md-navigation-bar>

Navigation Drawer

Element: md-navigation-drawer | Import: @material/web/navigation/navigation-drawer.js Use when: Many destinations, larger screens, can be modal or persistent.

Attribute Type Description
opened boolean Open state
type string standard or modal 
<md-navigation-drawer opened>
  <div slot="headline">Mail</div>
  <md-list>
    <md-list-item type="button" active>
      <md-icon slot="start">inbox</md-icon>
      Inbox
    </md-list-item>
    <md-list-item type="button">
      <md-icon slot="start">send</md-icon>
      Sent
    </md-list-item>
  </md-list>
</md-navigation-drawer>

Navigation Rail

No @material/web element yet. Use when: 3–7 destinations, medium screens (600–839dp), persistent side navigation.

<nav class="md3-nav-rail" aria-label="Main">
  <md-fab size="small" variant="tertiary" aria-label="Compose">
    <md-icon slot="icon">edit</md-icon>
  </md-fab>
  <div class="md3-nav-rail__items">
    <a href="/" class="md3-nav-rail__item md3-nav-rail__item--active" aria-current="page">
      <md-icon>home</md-icon>
      <span>Home</span>
    </a>
    <a href="/search" class="md3-nav-rail__item">
      <md-icon>search</md-icon>
      <span>Search</span>
    </a>
  </div>
</nav>

.md3-nav-rail {
  width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 12px;
  background: var(--md-sys-color-surface);
}
.md3-nav-rail__items { display: flex; flex-direction: column; gap: 12px; }
.md3-nav-rail__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  text-decoration: none;
  color: var(--md-sys-color-on-surface-variant);
  font: var(--md-sys-typescale-label-medium);
}
.md3-nav-rail__item--active { color: var(--md-sys-color-on-surface); }

Search

No @material/web element yet. Two patterns:

  • Search bar: Persistent search field in top app bar area
  • Search view: Expandable search overlay with suggestions

I/O 2026 note: Expressive search and search app bar guidance adds a refreshed visual style, motion, and more flexible trailing icon behavior. In Jetpack Compose, use the current Material3 search APIs and expressive app bar variants where available. On web, implement search as a custom component using MD3 shape, color, spacing, and motion tokens.

Tabs

Elements: md-tabs, md-primary-tab, md-secondary-tab Import: @material/web/tabs/tabs.js, @material/web/tabs/primary-tab.js, @material/web/tabs/secondary-tab.js

Variant Element Use
Primary md-primary-tab Top-level navigation within a page
Secondary md-secondary-tab Sub-sections within primary tabs 
<md-tabs>
  <md-primary-tab active>
    <md-icon slot="icon">flight</md-icon>
    Flights
  </md-primary-tab>
  <md-primary-tab>
    <md-icon slot="icon">hotel</md-icon>
    Hotels
  </md-primary-tab>
  <md-primary-tab>
    <md-icon slot="icon">explore</md-icon>
    Explore
  </md-primary-tab>
</md-tabs>

A11y: Tab set has built-in tablist role. Connect tabs to panels with aria-controls.

Toolbar

No @material/web element yet. Displays frequently used actions relevant to current page context. Typically placed below top app bar or in contextual positions.

Data Display

List

Elements: md-list, md-list-item Import: @material/web/list/list.js, @material/web/list/list-item.js

I/O 2026 note: Expressive lists add more vibrant styles and flexible item configurations. In Compose, prefer Material3 list patterns and keep spacing, leading/trailing content, supporting text, and dividers token-driven. On web, md-list is useful for standard lists; custom CSS may be needed for expressive list treatments.

Attribute (list-item) Type Description
type string text (default), button, link
href string URL (when type="link")
disabled boolean Disabled state 
<md-list>
  <!-- One-line -->
  <md-list-item>Single line item</md-list-item>

  <!-- Two-line with icon -->
  <md-list-item>
    <md-icon slot="start">person</md-icon>
    <div slot="headline">Jane Smith</div>
    <div slot="supporting-text">Senior Developer</div>
  </md-list-item>

  <!-- Three-line -->
  <md-list-item>
    <md-icon slot="start">mail</md-icon>
    <div slot="headline">Meeting notes</div>
    <div slot="supporting-text">Please review the attached notes from today's standup meeting and provide feedback.</div>
    <div slot="trailing-supporting-text">3 min ago</div>
  </md-list-item>

  <md-divider></md-divider>

  <!-- Clickable item -->
  <md-list-item type="button" onclick="handleClick()">
    <md-icon slot="start">settings</md-icon>
    <div slot="headline">Settings</div>
    <md-icon slot="end">chevron_right</md-icon>
  </md-list-item>
</md-list>

Slots: start (leading element), end (trailing element), headline (primary text), supporting-text (secondary text), trailing-supporting-text (trailing metadata), overline (above headline)

Reference in New Issue View Git Blame Copy Permalink