material-design-3-components

📁 shelbeely/shelbeely-agent-skills 📅 8 days ago

总安装量

周安装量

#55824

全站排名

安装命令

npx skills add https://github.com/shelbeely/shelbeely-agent-skills --skill material-design-3-components

Agent 安装分布

gemini-cli 3

github-copilot 3

codex 3

kimi-cli 3

cursor 3

amp 3

Skill 文档

Material Design 3 Components

Overview

This skill provides a comprehensive reference for all Material Design 3 (M3) components â covering the full specification from Material You foundations through M3 Expressive enhancements. Each component follows M3’s token-based design system for color, shape, typography, motion, and layout.

Keywords: Material Design 3, M3, components, buttons, cards, dialogs, navigation, FAB, chips, text fields, tabs, menus, snackbar, bottom sheet, Material You, M3 Expressive

Component Categories

M3 components are organized into six categories:

Action â Buttons, FABs, icon buttons, segmented buttons, split buttons, button groups
Containment â Cards, carousels, dividers, lists, bottom sheets, side sheets
Communication â Badges, dialogs, progress indicators, snackbars, tooltips
Navigation â App bars, navigation bar, navigation drawer, navigation rail, tabs, search
Selection â Checkboxes, chips, date/time pickers, menus, radio buttons, sliders, switches
Text Input â Text fields (filled, outlined)

Action Components

Buttons

M3 defines five button types with increasing emphasis:

Type	Emphasis	Use
Text Button	Lowest	Optional actions, less important actions
Outlined Button	Low	Important but not primary actions
Tonal Button	Medium	Actions that need more emphasis than outlined
Filled Button	High	Primary actions, main CTA
Elevated Button	Medium	Actions on visually busy backgrounds

Common Button Specs:

Height: 40dp
Min width: 48dp
Padding: 24dp horizontal, 10dp vertical
Shape: Full radius (pill)
Typography: Label Large
Icon gap: 8dp

/* Filled Button */
.md3-button-filled {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border-radius: var(--md-sys-shape-corner-full);
  padding: 10px 24px;
  min-height: 40px;
  font-family: var(--md-sys-typescale-label-large-font);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  border: none;
  cursor: pointer;
}

/* Outlined Button */
.md3-button-outlined {
  background-color: transparent;
  color: var(--md-sys-color-primary);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  padding: 10px 24px;
  min-height: 40px;
}

/* Tonal Button */
.md3-button-tonal {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-radius: var(--md-sys-shape-corner-full);
  padding: 10px 24px;
  min-height: 40px;
  border: none;
}

/* Text Button */
.md3-button-text {
  background-color: transparent;
  color: var(--md-sys-color-primary);
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  padding: 10px 12px;
  min-height: 40px;
}

/* Elevated Button */
.md3-button-elevated {
  background-color: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-primary);
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  padding: 10px 24px;
  min-height: 40px;
  box-shadow: var(--md-sys-elevation-1);
}

Icon Buttons

Four variants: standard, filled, tonal, outlined.

Size: 48dp touch target, 40dp visual
Icon size: 24dp

.md3-icon-button {
  width: 48px;
  height: 48px;
  border-radius: var(--md-sys-shape-corner-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
}

.md3-icon-button-filled {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

Floating Action Buttons (FABs)

Primary action buttons that float above content:

Size	Dimensions	Corner Radius	Icon Size
Medium (replaces Small)	40Ã40dp	12dp	24dp
Standard	56Ã56dp	20dp	24dp
Large	96Ã96dp	32dp	36dp
Extended	56dp height, variable width	20dp	24dp + text

/* Standard FAB */
.md3-fab {
  width: 56px;
  height: 56px;
  border-radius: var(--md-sys-shape-corner-large);
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border: none;
  box-shadow: var(--md-sys-elevation-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Large FAB */
.md3-fab-large {
  width: 96px;
  height: 96px;
  border-radius: var(--md-sys-shape-corner-extra-large);
}

/* Extended FAB */
.md3-fab-extended {
  height: 56px;
  width: auto;
  border-radius: var(--md-sys-shape-corner-large);
  padding: 0 20px;
  gap: 12px;
}

FAB Menu (M3 Expressive)

Tap a FAB to reveal additional contextual actions:

.md3-fab-menu {
  display: flex;
  flex-direction: column;
  gap: var(--md-sys-spacing-2);
  align-items: flex-end;
}

.md3-fab-menu-item {
  display: flex;
  align-items: center;
  gap: var(--md-sys-spacing-3);
  padding: var(--md-sys-spacing-2) var(--md-sys-spacing-4);
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-surface-container);
  box-shadow: var(--md-sys-elevation-2);
}

Split Buttons (M3 Expressive)

Combine a primary action with a secondary dropdown:

.md3-split-button {
  display: inline-flex;
  border-radius: var(--md-sys-shape-corner-full);
  overflow: hidden;
}

.md3-split-button-primary {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  padding: 10px 16px;
  border: none;
}

.md3-split-button-secondary {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  padding: 10px 12px;
  border: none;
  border-left: 1px solid var(--md-sys-color-on-primary);
  opacity: 0.3;
}

Button Groups (M3 Expressive)

Organize related buttons into connected or standard groups:

Standard Button Group: Buttons arranged in a container for single or multiple selection.

Connected Button Group: Visually merged buttons replacing deprecated segmented buttons.

.md3-button-group {
  display: inline-flex;
  border-radius: var(--md-sys-shape-corner-full);
  overflow: hidden;
  border: 1px solid var(--md-sys-color-outline);
}

.md3-button-group-item {
  padding: 10px 24px;
  background: transparent;
  color: var(--md-sys-color-on-surface);
  border: none;
  border-right: 1px solid var(--md-sys-color-outline);
}

.md3-button-group-item:last-child {
  border-right: none;
}

.md3-button-group-item[aria-pressed="true"] {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

Segmented Buttons (Legacy â replaced by Button Groups in M3 Expressive)

Use button groups instead. Segmented buttons are deprecated in M3 Expressive.

Containment Components

Cards

Three card types for grouping content:

Type	Background	Border	Elevation
Filled	surface-container-highest	None	Level 0
Elevated	surface-container-low	None	Level 1
Outlined	surface	1px outline-variant	Level 0

/* Elevated Card */
.md3-card-elevated {
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: var(--md-sys-elevation-1);
  padding: var(--md-sys-spacing-4);
}

/* Filled Card */
.md3-card-filled {
  background: var(--md-sys-color-surface-container-highest);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: var(--md-sys-spacing-4);
}

/* Outlined Card */
.md3-card-outlined {
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: var(--md-sys-spacing-4);
}

Carousel

Horizontally scrollable container for browsing content:

.md3-carousel {
  display: flex;
  gap: var(--md-sys-spacing-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: var(--md-sys-spacing-4);
}

.md3-carousel-item {
  scroll-snap-align: start;
  flex-shrink: 0;
  border-radius: var(--md-sys-shape-corner-extra-large);
  overflow: hidden;
}

Bottom Sheets

Supplementary content from the bottom of the screen:

.md3-bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-extra-extra-large)
                 var(--md-sys-shape-corner-extra-extra-large) 0 0;
  padding: var(--md-sys-spacing-6);
  box-shadow: var(--md-sys-elevation-4);
}

.md3-bottom-sheet-handle {
  width: 32px;
  height: 4px;
  background: var(--md-sys-color-on-surface-variant);
  border-radius: var(--md-sys-shape-corner-full);
  margin: 0 auto var(--md-sys-spacing-4);
  opacity: 0.4;
}

Side Sheets

Slide out from the side for supplementary content:

.md3-side-sheet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 360px;
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-extra-large) 0 0 var(--md-sys-shape-corner-extra-large);
  padding: var(--md-sys-spacing-6);
  box-shadow: var(--md-sys-elevation-4);
}

Dividers

Separate content within sections:

.md3-divider {
  height: 1px;
  background: var(--md-sys-color-outline-variant);
  border: none;
}

/* Inset divider */
.md3-divider-inset {
  margin-left: var(--md-sys-spacing-4);
}

Lists

Continuous vertical indexes of text or images:

.md3-list-item {
  display: flex;
  align-items: center;
  gap: var(--md-sys-spacing-4);
  padding: var(--md-sys-spacing-2) var(--md-sys-spacing-4);
  min-height: 56px;
}

.md3-list-item-headline {
  font-family: var(--md-sys-typescale-body-large-font);
  font-size: var(--md-sys-typescale-body-large-size);
  color: var(--md-sys-color-on-surface);
}

.md3-list-item-supporting {
  font-family: var(--md-sys-typescale-body-medium-font);
  font-size: var(--md-sys-typescale-body-medium-size);
  color: var(--md-sys-color-on-surface-variant);
}

Communication Components

Badges

Small status indicators on icons or avatars:

/* Small badge (dot) */
.md3-badge-small {
  width: 6px;
  height: 6px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-error);
}

/* Large badge (with count) */
.md3-badge-large {
  min-width: 16px;
  height: 16px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-error);
  color: var(--md-sys-color-on-error);
  font-size: var(--md-sys-typescale-label-small-size);
  font-weight: var(--md-sys-typescale-label-small-weight);
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

Dialogs

Prompt users for decisions or information:

.md3-dialog {
  background: var(--md-sys-color-surface-container-high);
  border-radius: var(--md-sys-shape-corner-extra-large);
  padding: var(--md-sys-spacing-6);
  min-width: 280px;
  max-width: 560px;
  box-shadow: var(--md-sys-elevation-3);
}

.md3-dialog-title {
  font-family: var(--md-sys-typescale-headline-small-font);
  font-size: var(--md-sys-typescale-headline-small-size);
  color: var(--md-sys-color-on-surface);
  margin-bottom: var(--md-sys-spacing-4);
}

.md3-dialog-content {
  font-family: var(--md-sys-typescale-body-medium-font);
  font-size: var(--md-sys-typescale-body-medium-size);
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: var(--md-sys-spacing-6);
}

.md3-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--md-sys-spacing-2);
}

/* Scrim behind dialog */
.md3-dialog-scrim {
  position: fixed;
  inset: 0;
  background: var(--md-sys-color-scrim);
  opacity: 0.32;
}

Progress Indicators

Show process status â linear and circular:

/* Linear Progress */
.md3-progress-linear {
  width: 100%;
  height: 4px;
  background: var(--md-sys-color-surface-container-highest);
  border-radius: var(--md-sys-shape-corner-full);
  overflow: hidden;
}

.md3-progress-linear-indicator {
  height: 100%;
  background: var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-full);
  transition: width 200ms var(--md-sys-motion-easing-standard);
}

/* Circular Progress */
.md3-progress-circular {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 4px solid var(--md-sys-color-surface-container-highest);
  border-top-color: var(--md-sys-color-primary);
  animation: md3-spin 1.4s linear infinite;
}

@keyframes md3-spin {
  to { transform: rotate(360deg); }
}

Snackbars

Brief messages about app processes:

.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: var(--md-sys-spacing-4);
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: var(--md-sys-spacing-2);
  box-shadow: var(--md-sys-elevation-3);
  max-width: 560px;
}

.md3-snackbar-action {
  color: var(--md-sys-color-inverse-primary);
  font-weight: var(--md-sys-typescale-label-large-weight);
}

Tooltips

Informative text on hover or long press:

/* Plain tooltip */
.md3-tooltip {
  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: 4px 8px;
  font-size: var(--md-sys-typescale-body-small-size);
  max-width: 200px;
}

/* Rich tooltip */
.md3-tooltip-rich {
  background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: var(--md-sys-spacing-4);
  box-shadow: var(--md-sys-elevation-2);
  max-width: 320px;
}

Navigation Components

Top App Bar

Provides navigation and actions at the top:

Type	Height	Description
Center-aligned	64dp	Title centered
Small	64dp	Title left-aligned
Medium	112dp	Title below navigation icons
Large	152dp	Prominent title display

.md3-top-app-bar {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 var(--md-sys-spacing-4);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  gap: var(--md-sys-spacing-2);
}

.md3-top-app-bar-title {
  font-family: var(--md-sys-typescale-title-large-font);
  font-size: var(--md-sys-typescale-title-large-size);
  flex: 1;
}

/* Scrolled state */
.md3-top-app-bar-scrolled {
  background: var(--md-sys-color-surface-container);
  box-shadow: var(--md-sys-elevation-2);
}

Bottom App Bar (Legacy â replaced by Docked Toolbar in M3 Expressive)

For apps that have not migrated to toolbars:

.md3-bottom-app-bar {
  display: flex;
  align-items: center;
  height: 80px;
  padding: 0 var(--md-sys-spacing-4);
  background: var(--md-sys-color-surface-container);
  gap: var(--md-sys-spacing-2);
}

Toolbars (M3 Expressive)

Replace bottom app bars with more flexible options:

Docked Toolbar: Full-width for global actions. Floating Toolbar: Floats above content for context-sensitive actions (horizontal or vertical).

/* Docked Toolbar */
.md3-toolbar-docked {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 var(--md-sys-spacing-4);
  background: var(--md-sys-color-surface-container);
  gap: var(--md-sys-spacing-2);
}

/* Floating Toolbar (horizontal) */
.md3-toolbar-floating {
  display: inline-flex;
  align-items: center;
  height: 56px;
  padding: 0 var(--md-sys-spacing-3);
  background: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--md-sys-elevation-2);
  gap: var(--md-sys-spacing-1);
  backdrop-filter: blur(12px);
}

/* Floating Toolbar (vertical) */
.md3-toolbar-floating-vertical {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 56px;
  padding: var(--md-sys-spacing-3) 0;
  background: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--md-sys-elevation-2);
  gap: var(--md-sys-spacing-1);
}

/* Vibrant Toolbar (high emphasis) */
.md3-toolbar-vibrant {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

Navigation Bar (Bottom Navigation)

Primary navigation for mobile, displayed at screen bottom:

.md3-navigation-bar {
  display: flex;
  height: 80px;
  background: var(--md-sys-color-surface-container);
  box-shadow: var(--md-sys-elevation-2);
}

.md3-navigation-bar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--md-sys-color-on-surface-variant);
  min-width: 48px;
}

.md3-navigation-bar-item[aria-selected="true"] {
  color: var(--md-sys-color-on-surface);
}

/* Active indicator */
.md3-navigation-bar-indicator {
  background: var(--md-sys-color-secondary-container);
  border-radius: var(--md-sys-shape-corner-full);
  padding: 4px 20px;
}

Navigation Rail

Vertical navigation for medium-sized screens:

.md3-navigation-rail {
  display: flex;
  flex-direction: column;
  width: 80px;
  background: var(--md-sys-color-surface);
  padding: var(--md-sys-spacing-3) 0;
  align-items: center;
  gap: var(--md-sys-spacing-3);
}

Navigation Drawer

Side panel navigation for large screens:

.md3-navigation-drawer {
  width: 360px;
  background: var(--md-sys-color-surface-container-low);
  border-radius: 0 var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large) 0;
  padding: var(--md-sys-spacing-3);
}

.md3-navigation-drawer-item {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 var(--md-sys-spacing-4);
  border-radius: var(--md-sys-shape-corner-full);
  gap: var(--md-sys-spacing-3);
}

.md3-navigation-drawer-item[aria-selected="true"] {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

Tabs

Switch between grouped content sections:

.md3-tabs {
  display: flex;
  border-bottom: 1px solid var(--md-sys-color-surface-variant);
}

.md3-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  font-family: var(--md-sys-typescale-title-small-font);
  font-size: var(--md-sys-typescale-title-small-size);
  color: var(--md-sys-color-on-surface-variant);
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
}

.md3-tab[aria-selected="true"] {
  color: var(--md-sys-color-primary);
}

/* Active indicator */
.md3-tab[aria-selected="true"]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--md-sys-color-primary);
  border-radius: 3px 3px 0 0;
}

Search

Input for querying and filtering content:

.md3-search-bar {
  display: flex;
  align-items: center;
  height: 56px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-highest);
  padding: 0 var(--md-sys-spacing-4);
  gap: var(--md-sys-spacing-4);
}

.md3-search-bar input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--md-sys-typescale-body-large-font);
  font-size: var(--md-sys-typescale-body-large-size);
  color: var(--md-sys-color-on-surface);
  outline: none;
}

.md3-search-bar input::placeholder {
  color: var(--md-sys-color-on-surface-variant);
}

Selection Components

Checkboxes

Multi-selection toggles:

Size: 18dp visual, 48dp touch target
Border: 2dp, outline color when unchecked
Fill: primary when checked
Check mark: on-primary

Radio Buttons

Single selection from options:

Size: 20dp visual, 48dp touch target
Border: 2dp, outline when unselected
Fill: primary when selected
Inner circle: 10dp

Switches

Toggle settings on or off:

Track: 52Ã32dp
Thumb: 16dp unchecked, 24dp checked
Selected: primary track, on-primary thumb icon
Unselected: surface-container-highest track, outline thumb

.md3-switch {
  width: 52px;
  height: 32px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-highest);
  border: 2px solid var(--md-sys-color-outline);
  position: relative;
  cursor: pointer;
  transition: background 200ms var(--md-sys-motion-easing-standard);
}

.md3-switch[aria-checked="true"] {
  background: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
}

.md3-switch-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--md-sys-color-outline);
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
  transition: all 200ms var(--md-sys-motion-easing-standard);
}

.md3-switch[aria-checked="true"] .md3-switch-thumb {
  width: 24px;
  height: 24px;
  background: var(--md-sys-color-on-primary);
  left: calc(100% - 28px);
}

Chips

Compact elements for filtering, input, or actions:

Type	Use	Selectable
Assist	Suggest actions	No
Filter	Filter content	Yes
Input	User-entered data	Removable
Suggestion	Dynamic suggestions	No

.md3-chip {
  height: 32px;
  border-radius: var(--md-sys-shape-corner-small);
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--md-sys-typescale-label-large-font);
  font-size: var(--md-sys-typescale-label-large-size);
  border: 1px solid var(--md-sys-color-outline);
  background: transparent;
  color: var(--md-sys-color-on-surface-variant);
  cursor: pointer;
}

.md3-chip[aria-selected="true"] {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-color: transparent;
}

Sliders

Range or value selection:

Track height: 4dp
Thumb: 20dp
Active track: primary
Inactive track: surface-container-highest

Date Pickers and Time Pickers

Dialogs or inputs for selecting dates and times. Follow M3 dialog patterns with appropriate shape and color tokens.

Menus

Dropdown or context menus:

.md3-menu {
  background: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-extra-small);
  box-shadow: var(--md-sys-elevation-2);
  padding: var(--md-sys-spacing-2) 0;
  min-width: 112px;
  max-width: 280px;
}

.md3-menu-item {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 var(--md-sys-spacing-3);
  gap: var(--md-sys-spacing-3);
  color: var(--md-sys-color-on-surface);
  font-family: var(--md-sys-typescale-body-large-font);
  font-size: var(--md-sys-typescale-body-large-size);
  cursor: pointer;
}

Text Input Components

Text Fields

Two variants: Filled and Outlined.

Filled Text Field:

.md3-text-field-filled {
  display: flex;
  flex-direction: column;
  background: var(--md-sys-color-surface-container-highest);
  border-radius: var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-extra-small) 0 0;
  padding: 8px 16px 8px;
  position: relative;
}

.md3-text-field-filled input {
  border: none;
  background: transparent;
  font-family: var(--md-sys-typescale-body-large-font);
  font-size: var(--md-sys-typescale-body-large-size);
  color: var(--md-sys-color-on-surface);
  outline: none;
  padding: 4px 0;
}

.md3-text-field-filled::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--md-sys-color-on-surface-variant);
}

.md3-text-field-filled:focus-within::after {
  height: 2px;
  background: var(--md-sys-color-primary);
}

Outlined Text Field:

.md3-text-field-outlined {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  padding: 8px 16px;
}

.md3-text-field-outlined:focus-within {
  border-color: var(--md-sys-color-primary);
  border-width: 2px;
}

.md3-text-field-outlined input {
  border: none;
  background: transparent;
  font-family: var(--md-sys-typescale-body-large-font);
  font-size: var(--md-sys-typescale-body-large-size);
  color: var(--md-sys-color-on-surface);
  outline: none;
}

Labels and Supporting Text:

.md3-text-field-label {
  font-family: var(--md-sys-typescale-body-small-font);
  font-size: var(--md-sys-typescale-body-small-size);
  color: var(--md-sys-color-on-surface-variant);
}

.md3-text-field-supporting {
  font-family: var(--md-sys-typescale-body-small-font);
  font-size: var(--md-sys-typescale-body-small-size);
  color: var(--md-sys-color-on-surface-variant);
  padding: 4px 16px 0;
}

.md3-text-field-error .md3-text-field-supporting {
  color: var(--md-sys-color-error);
}

Component Interaction States

All M3 components follow consistent interaction state patterns:

State	Visual Effect
Enabled	Default appearance
Hovered	8% state layer overlay
Focused	12% state layer overlay + focus indicator
Pressed	12% state layer overlay
Dragged	16% state layer overlay
Disabled	38% content opacity, 12% background opacity

Framework-Specific Component Usage

For framework-specific component examples (setup, theming, and usage), see the dedicated library skills:

React / MUI / Next.js: m3-web-react
Angular Material: m3-web-angular
Vue / Vuetify 3: m3-web-vue
Svelte / SMUI: m3-web-svelte
Web Components (@material/web): m3-web-webcomponents
Tailwind CSS: m3-web-tailwind
Ink (React CLI): m3-web-ink
Vanilla CSS: m3-web-vanilla
Flutter: m3-web-flutter
Android / Jetpack Compose: m3-web-android

Accessibility Guidelines for Components

Touch targets: Minimum 48Ã48dp for all interactive components
Focus indicators: Visible outline (2px solid primary, 2px offset)
Color contrast: 4.5:1 for text, 3:1 for interactive elements
ARIA attributes: Use appropriate roles, labels, and states
Keyboard navigation: All components must be fully keyboard operable
Screen reader support: Use semantic HTML and ARIA announcements

Checklist for Component Implementation

When implementing M3 components, ensure:

Component uses appropriate M3 color tokens (not hard-coded colors)
Shape follows the M3 shape scale for that component type
Typography uses the correct type scale role
All interaction states are implemented (hover, focus, pressed, disabled)
Touch targets meet 48Ã48dp minimum
Focus indicators are visible and have adequate contrast
Component works in both light and dark themes
Disabled states use correct opacity values (38% content, 12% background)
Motion uses spring-based easing for transitions
ARIA attributes are correctly applied
Component is fully keyboard navigable
M3 Expressive additions (FAB menu, split buttons, button groups, toolbars) are used where appropriate
Library-specific best practices are followed (see library-specific skills: m3-web-react, m3-web-angular, etc.)

Resources

component-tokens.md â Quick reference for all @material/web component CSS custom property prefixes, included in this skill’s directory.
examples/component-anatomy.svg â Visual reference SVG showing M3 component anatomy: button variants, card variants, FAB sizes, and interactive state layers with token mappings.
M3 component specs: https://m3.material.io/components
M3 for Web: https://m3.material.io/develop/web
@material/web: https://github.com/material-components/material-web
Angular Material: https://github.com/angular/components
Material Design Tokens: https://github.com/material-foundation/material-tokens

GitHub 仓库 ↗ ← 返回陌讯 Skills 聚合平台