Shape System
Corner radius tokens and shape families that create visual consistency across components. Shapes range from sharp corners to fully rounded pills.
7 tokens2 corner families
Shape Scale Preview
From None (0dp) to Full (pill)
Why Shape Matters
Shape is one of the three major expression tools in Material Design 3 (alongside color and typography). Consistent corner radii create visual harmony and communicate UI hierarchy.
- Smaller shapes (0-8dp): Compact elements like text fields, chips, menus
- Medium shapes (12dp): Cards, lists, and standard containers
- Larger shapes (16-28dp): Prominent elements like FABs, sheets, dialogs
- Full (pill): Maximum friendliness for buttons and badges
Shape Scale Overview
M3 uses a shape scale of 7 corner radius tokens that create visual consistency across components. Shape is applied based on container size, with larger containers typically using larger radii. Corner families can be Rounded (default) or Cut for geometric styles.
Corner Families
The default corner style. Creates smooth, friendly curves that work well in most contexts. Used for almost all M3 components.
Shape Scale Reference
| Token | Value | Usage | Preview |
|---|---|---|---|
| None | 0dp | Square corners for full-bleed images, containers that extend to screen edge, or elements where shape isn't a defining characteristic. | |
| Extra Small | 4dp | Small, compact UI elements where minimal rounding provides subtle softness without significantly affecting the shape. | |
| Small | 8dp | Small interactive components that benefit from rounded corners for friendliness and touch affordance. | |
| Medium | 12dp | Standard component corners. | |
| Large | 16dp | Prominent, important UI elements that should stand out with more expressive rounding. | |
| Extra Large | 28dp | Large modal surfaces and sheets where generous rounding creates a welcoming, approachable feel. | |
| Full | 9999dp | Pill-shaped elements where corners form perfect semicircles (stadium shape). |
Component Shape Map
How M3 components map to shape scale tokens based on their corner radius specifications.
Extra Small
4dp
Outlined Text FieldSnackbarPlain TooltipMenuSelectAutocomplete
Small
8dp
Assist ChipFilter ChipInput ChipSuggestion Chip
Medium
12dp
Elevated CardFilled CardOutlined CardRich Tooltip
Large
16dp
Extended FAB
Extra Large
28dp
Basic DialogSearch BarAlert DialogDocked Search Bar
Full
9999dp
Elevated ButtonFilled ButtonFilled Tonal ButtonOutlined ButtonText ButtonStandard Icon ButtonFilled Icon ButtonFilled Tonal Icon ButtonOutlined Icon ButtonSegmented ButtonButton Group
Other
Components with variable or custom corner radius
FAB (Floating Action Button)Navigation BarNavigation RailNavigation DrawerTop App BarBottom App BarFilled Text FieldCheckboxRadio ButtonSwitchSliderFull-Screen DialogBottom SheetSide SheetCircular Progress IndicatorLinear Progress IndicatorBadgeDate PickerTime PickerListPrimary TabsSecondary TabsSearch ViewDividerCarouselFAB MenuLoading IndicatorDate Range PickerDate Picker DialogTime InputTri-state CheckboxRange SliderList ItemBannerData TableElevation SurfaceFocus RingRippleSwipe to Dismiss