Skip to main content

Module shape

Module shape 

Source
Expand description

Corner radii and the connected-group corner rule.

Constants§

FIELD_RADIUS
Filled and outlined text fields: M3 extra-small (top corners for filled).
MENU_RADIUS
Menus and the fields that open them: M3 large.
RADIUS_CARD
Cards: M3 medium.
RADIUS_EXTRA_EXTRA_LARGE
M3 Expressive corner extra-extra-large (48).
RADIUS_EXTRA_LARGE
M3 corner extra-large (28): dialogs, large hero surfaces.
RADIUS_EXTRA_LARGE_INCREASED
M3 Expressive corner extra-large-increased (32).
RADIUS_EXTRA_SMALL
M3 corner extra-small (4): snackbars, text fields, small flat surfaces.
RADIUS_FULL
M3 corner full: the kit’s Corner/Full (1000), large enough to round any control into a pill.
RADIUS_HERO
Large standalone cards and hero surfaces: M3 extra-large.
RADIUS_LARGE
M3 corner large (16).
RADIUS_LARGE_INCREASED
M3 Expressive corner large-increased (20).
RADIUS_MEDIUM
M3 corner medium (12): cards.
RADIUS_NONE
M3 corner none (0).
RADIUS_PILL
Alias of RADIUS_FULL.
RADIUS_SMALL
M3 corner small (8): chips, badges, small covers and notices.
TILE_GAP
TILE_INNER_RADIUS
TILE_RADIUS
Connected tiles keep 24px corners on their group’s outside and 6px where tiles meet, with 2px of ground between them.

Functions§

list_corners
The outside corners of item index in a vertical group of count.
tile_corners
Round element as a connected tile: outside corners at TILE_RADIUS, inner ones at TILE_INNER_RADIUS.

Type Aliases§

OuterCorners
Which corners of a connected item are on its group’s outside, as top-left, top-right, bottom-right, bottom-left.