Material Design 3 "Icon Button" tokens: All tokens
Preview
Mark complete
Mark complete
Mark complete
Mark complete
Browse tokens
Color
Icon button - Color - Filled
Enabled
| Token | Value |
|---|---|
Icon button filled container colormd.comp.icon-button.filled.container.color | #6750A4 md.comp.icon-button.filled.container.color
|
Icon button filled icon colormd.comp.icon-button.filled.icon.color | #FFFFFF md.comp.icon-button.filled.icon.color
|
Icon button filled container color - toggle (selected)md.comp.icon-button.filled.selected.container.color | #6750A4 md.comp.icon-button.filled.selected.container.color
|
Icon button filled icon color - toggle (selected)md.comp.icon-button.filled.selected.icon.color | #FFFFFF md.comp.icon-button.filled.selected.icon.color
|
Icon button filled container color - toggle (unselected)md.comp.icon-button.filled.unselected.container.color | #F3EDF7 md.comp.icon-button.filled.unselected.container.color
|
Icon button filled icon color - toggle (unselected)md.comp.icon-button.filled.unselected.icon.color | #49454F md.comp.icon-button.filled.unselected.icon.color
|
Disabled
| Token | Value |
|---|---|
Icon button filled disabled container colormd.comp.icon-button.filled.disabled.container.color | #1D1B20 md.comp.icon-button.filled.disabled.container.color
|
Icon button filled disabled container opacitymd.comp.icon-button.filled.disabled.container.opacity | 10% md.comp.icon-button.filled.disabled.container.opacity |
Icon button filled disabled icon colormd.comp.icon-button.filled.disabled.icon.color | #1D1B20 md.comp.icon-button.filled.disabled.icon.color
|
Icon button filled disabled icon opacitymd.comp.icon-button.filled.disabled.icon.opacity | 38% md.comp.icon-button.filled.disabled.icon.opacity |
Hovered
| Token | Value |
|---|---|
Icon button filled hovered icon colormd.comp.icon-button.filled.hovered.icon.color | #FFFFFF md.comp.icon-button.filled.hovered.icon.color
|
Icon button filled hovered state layer colormd.comp.icon-button.filled.hovered.state-layer.color | #FFFFFF md.comp.icon-button.filled.hovered.state-layer.color
|
Icon button filled hovered state layer opacitymd.comp.icon-button.filled.hovered.state-layer.opacity | 8% md.comp.icon-button.filled.hovered.state-layer.opacity
|
Icon button filled hovered icon color - toggle (selected)md.comp.icon-button.filled.selected.hovered.icon.color | #FFFFFF md.comp.icon-button.filled.selected.hovered.icon.color
|
Icon button filled hovered state layer color - toggle (selected)md.comp.icon-button.filled.selected.hovered.state-layer.color | #FFFFFF md.comp.icon-button.filled.selected.hovered.state-layer.color
|
Icon button filled hovered icon color - toggle (unselected)md.comp.icon-button.filled.unselected.hovered.icon.color | #49454F md.comp.icon-button.filled.unselected.hovered.icon.color
|
Icon button filled hovered state layer color - toggle (unselected)md.comp.icon-button.filled.unselected.hovered.state-layer.color | #49454F md.comp.icon-button.filled.unselected.hovered.state-layer.color
|
Focused
| Token | Value |
|---|---|
Icon button filled focused icon colormd.comp.icon-button.filled.focused.icon.color | #FFFFFF md.comp.icon-button.filled.focused.icon.color
|
Icon button filled focused state layer colormd.comp.icon-button.filled.focused.state-layer.color | #FFFFFF md.comp.icon-button.filled.focused.state-layer.color
|
Icon button filled focused state layer opacitymd.comp.icon-button.filled.focused.state-layer.opacity | 10% md.comp.icon-button.filled.focused.state-layer.opacity
|
Icon button filled focused icon color - toggle (selected)md.comp.icon-button.filled.selected.focused.icon.color | #FFFFFF md.comp.icon-button.filled.selected.focused.icon.color
|
Icon button filled focused state layer color - toggle (selected)md.comp.icon-button.filled.selected.focused.state-layer.color | #FFFFFF md.comp.icon-button.filled.selected.focused.state-layer.color
|
Icon button filled focused icon color - toggle (unselected)md.comp.icon-button.filled.unselected.focused.icon.color | #49454F md.comp.icon-button.filled.unselected.focused.icon.color
|
Icon button filled focused state layer color - toggle (unselected)md.comp.icon-button.filled.unselected.focused.state-layer.color | #49454F md.comp.icon-button.filled.unselected.focused.state-layer.color
|
Pressed
| Token | Value |
|---|---|
Icon button filled pressed icon colormd.comp.icon-button.filled.pressed.icon.color | #FFFFFF md.comp.icon-button.filled.pressed.icon.color
|
Icon button filled pressed state layer colormd.comp.icon-button.filled.pressed.state-layer.color | #FFFFFF md.comp.icon-button.filled.pressed.state-layer.color
|
Icon button filled pressed state layer opacitymd.comp.icon-button.filled.pressed.state-layer.opacity | 10% md.comp.icon-button.filled.pressed.state-layer.opacity
|
Icon button filled pressed icon color - toggle (selected)md.comp.icon-button.filled.selected.pressed.icon.color | #FFFFFF md.comp.icon-button.filled.selected.pressed.icon.color
|
Icon button filled pressed state layer color - toggle (selected)md.comp.icon-button.filled.selected.pressed.state-layer.color | #FFFFFF md.comp.icon-button.filled.selected.pressed.state-layer.color
|
Icon button filled pressed icon color - toggle (unselected)md.comp.icon-button.filled.unselected.pressed.icon.color | #49454F md.comp.icon-button.filled.unselected.pressed.icon.color
|
Icon button filled pressed state layer color - toggle (unselected)md.comp.icon-button.filled.unselected.pressed.state-layer.color | #49454F md.comp.icon-button.filled.unselected.pressed.state-layer.color
|
Icon button - Size - Large
| Token | Value |
|---|---|
Icon button large container heightmd.comp.icon-button.large.container.height | 96dp md.comp.icon-button.large.container.height |
Icon button large container shape roundmd.comp.icon-button.large.container.shape.round | Full md.comp.icon-button.large.container.shape.round
|
Icon button large container shape squaremd.comp.icon-button.large.container.shape.square | 28dp md.comp.icon-button.large.container.shape.square
|
Icon button large default leading spacemd.comp.icon-button.large.default.leading-space | 32dp md.comp.icon-button.large.default.leading-space
|
Icon button large default trailing spacemd.comp.icon-button.large.default.trailing-space | 32dp md.comp.icon-button.large.default.trailing-space
|
Icon button large icon sizemd.comp.icon-button.large.icon.size | 32dp md.comp.icon-button.large.icon.size |
Icon button large narrow leading spacemd.comp.icon-button.large.narrow.leading-space | 16dp md.comp.icon-button.large.narrow.leading-space
|
Icon button large narrow trailing spacemd.comp.icon-button.large.narrow.trailing-space | 16dp md.comp.icon-button.large.narrow.trailing-space
|
Icon button large outline widthmd.comp.icon-button.large.outlined.outline.width | 2dp md.comp.icon-button.large.outlined.outline.width |
Icon button large shape spring animation dampingmd.comp.icon-button.large.pressed.container.corner-size.motion.spring.damping | Numeric: 0.6 md.comp.icon-button.large.pressed.container.corner-size.motion.spring.damping
|
Icon button large shape spring animation stiffnessmd.comp.icon-button.large.pressed.container.corner-size.motion.spring.stiffness | Numeric: 800 md.comp.icon-button.large.pressed.container.corner-size.motion.spring.stiffness
|
Icon button large shape pressed morphmd.comp.icon-button.large.pressed.container.shape | 16dp md.comp.icon-button.large.pressed.container.shape
|
Icon button large selected container shape roundmd.comp.icon-button.large.selected.container.shape.round | 28dp md.comp.icon-button.large.selected.container.shape.round
|
Icon button large selected container shape squaremd.comp.icon-button.large.selected.container.shape.square | Full md.comp.icon-button.large.selected.container.shape.square
|
Icon button large wide leading spacemd.comp.icon-button.large.wide.leading-space | 48dp md.comp.icon-button.large.wide.leading-space
|
Icon button large wide trailing spacemd.comp.icon-button.large.wide.trailing-space | 48dp md.comp.icon-button.large.wide.trailing-space
|
Icon button - Size - Medium
| Token | Value |
|---|---|
Icon button medium container heightmd.comp.icon-button.medium.container.height | 56dp md.comp.icon-button.medium.container.height |
Icon button medium container shape roundmd.comp.icon-button.medium.container.shape.round | Full md.comp.icon-button.medium.container.shape.round
|
Icon button medium container shape squaremd.comp.icon-button.medium.container.shape.square | 16dp md.comp.icon-button.medium.container.shape.square
|
Icon button medium default leading spacemd.comp.icon-button.medium.default.leading-space | 16dp md.comp.icon-button.medium.default.leading-space
|
Icon button medium default trailing spacemd.comp.icon-button.medium.default.trailing-space | 16dp md.comp.icon-button.medium.default.trailing-space
|
Icon button medium icon sizemd.comp.icon-button.medium.icon.size | 24dp md.comp.icon-button.medium.icon.size |
Icon button medium narrow leading spacemd.comp.icon-button.medium.narrow.leading-space | 12dp md.comp.icon-button.medium.narrow.leading-space
|
Icon button medium narrow trailing spacemd.comp.icon-button.medium.narrow.trailing-space | 12dp md.comp.icon-button.medium.narrow.trailing-space
|
Icon button medium outline widthmd.comp.icon-button.medium.outlined.outline.width | 1dp md.comp.icon-button.medium.outlined.outline.width |
Icon button medium shape spring animation dampingmd.comp.icon-button.medium.pressed.container.corner-size.motion.spring.damping | Numeric: 0.6 md.comp.icon-button.medium.pressed.container.corner-size.motion.spring.damping
|
Icon button medium shape spring animation stiffnessmd.comp.icon-button.medium.pressed.container.corner-size.motion.spring.stiffness | Numeric: 800 md.comp.icon-button.medium.pressed.container.corner-size.motion.spring.stiffness
|
Icon button medium shape pressed morphmd.comp.icon-button.medium.pressed.container.shape | 12dp md.comp.icon-button.medium.pressed.container.shape
|
Icon button medium selected container shape roundmd.comp.icon-button.medium.selected.container.shape.round | 16dp md.comp.icon-button.medium.selected.container.shape.round
|
Icon button medium selected container shape squaremd.comp.icon-button.medium.selected.container.shape.square | Full md.comp.icon-button.medium.selected.container.shape.square
|
Icon button medium wide leading spacemd.comp.icon-button.medium.wide.leading-space | 24dp md.comp.icon-button.medium.wide.leading-space
|
Icon button medium wide trailing spacemd.comp.icon-button.medium.wide.trailing-space | 24dp md.comp.icon-button.medium.wide.trailing-space
|
Icon button - Color - Outlined
Enabled
| Token | Value |
|---|---|
Icon button outlined icon colormd.comp.icon-button.outlined.icon.color | #49454F md.comp.icon-button.outlined.icon.color
|
Icon button outlined colormd.comp.icon-button.outlined.outline.color | #CAC4D0 md.comp.icon-button.outlined.outline.color
|
Icon button outlined container color - toggle (selected)md.comp.icon-button.outlined.selected.container.color | #322F35 md.comp.icon-button.outlined.selected.container.color
|
Icon button outlined icon color - toggle (selected)md.comp.icon-button.outlined.selected.icon.color | #F5EFF7 md.comp.icon-button.outlined.selected.icon.color
|
Icon button outlined icon color - toggle (unselected)md.comp.icon-button.outlined.unselected.icon.color | #49454F md.comp.icon-button.outlined.unselected.icon.color
|
Icon button outlined color - toggle (unselected)md.comp.icon-button.outlined.unselected.outline.color | #CAC4D0 md.comp.icon-button.outlined.unselected.outline.color
|
Disabled
| Token | Value |
|---|---|
Icon button outlined disabled icon colormd.comp.icon-button.outlined.disabled.icon.color | #1D1B20 md.comp.icon-button.outlined.disabled.icon.color
|
Icon button outlined disabled icon opacitymd.comp.icon-button.outlined.disabled.icon.opacity | 38% md.comp.icon-button.outlined.disabled.icon.opacity |
Icon button outlined disabled outline colormd.comp.icon-button.outlined.disabled.outline.color | #CAC4D0 md.comp.icon-button.outlined.disabled.outline.color
|
Icon button outlined disabled container color (selected)md.comp.icon-button.outlined.selected.disabled.container.color | #1D1B20 md.comp.icon-button.outlined.selected.disabled.container.color
|
Icon button outlined disabled container opacity (selected)md.comp.icon-button.outlined.selected.disabled.container.opacity | 10% md.comp.icon-button.outlined.selected.disabled.container.opacity |
Icon button outlined disabled outline color (unselected)md.comp.icon-button.outlined.unselected.disabled.outline.color | #CAC4D0 md.comp.icon-button.outlined.unselected.disabled.outline.color
|
Hovered
| Token | Value |
|---|---|
Icon button outlined hovered icon colormd.comp.icon-button.outlined.hovered.icon.color | #49454F md.comp.icon-button.outlined.hovered.icon.color
|
Icon button outlined hovered state layer colormd.comp.icon-button.outlined.hovered.state-layer.color | #49454F md.comp.icon-button.outlined.hovered.state-layer.color
|
Icon button outlined hovered state layer opacitymd.comp.icon-button.outlined.hovered.state-layer.opacity | 8% md.comp.icon-button.outlined.hovered.state-layer.opacity
|
Icon button outlined hovered icon color - toggle (selected)md.comp.icon-button.outlined.selected.hovered.icon.color | #F5EFF7 md.comp.icon-button.outlined.selected.hovered.icon.color
|
Icon button outlined hovered state layer color - toggle (selected)md.comp.icon-button.outlined.selected.hovered.state-layer.color | #F5EFF7 md.comp.icon-button.outlined.selected.hovered.state-layer.color
|
Icon button outlined hovered icon color - toggle (unselected)md.comp.icon-button.outlined.unselected.hovered.icon.color | #49454F md.comp.icon-button.outlined.unselected.hovered.icon.color
|
Icon button outlined hovered state layer color - toggle (unselected)md.comp.icon-button.outlined.unselected.hovered.state-layer.color | #49454F md.comp.icon-button.outlined.unselected.hovered.state-layer.color
|
Focused
| Token | Value |
|---|---|
Icon button outlined focused icon colormd.comp.icon-button.outlined.focused.icon.color | #49454F md.comp.icon-button.outlined.focused.icon.color
|
Icon button outlined focused state layer colormd.comp.icon-button.outlined.focused.state-layer.color | #49454F md.comp.icon-button.outlined.focused.state-layer.color
|
Icon button outlined focused state layer opacitymd.comp.icon-button.outlined.focused.state-layer.opacity | 10% md.comp.icon-button.outlined.focused.state-layer.opacity
|
Icon button outlined focused icon color - toggle (selected)md.comp.icon-button.outlined.selected.focused.icon.color | #F5EFF7 md.comp.icon-button.outlined.selected.focused.icon.color
|
Icon button outlined focused state layer color - toggle (selected)md.comp.icon-button.outlined.selected.focused.state-layer.color | #F5EFF7 md.comp.icon-button.outlined.selected.focused.state-layer.color
|
Icon button outlined focused icon color - toggle (unselected)md.comp.icon-button.outlined.unselected.focused.icon.color | #49454F md.comp.icon-button.outlined.unselected.focused.icon.color
|
Icon button outlined focused state layer color - toggle (unselected)md.comp.icon-button.outlined.unselected.focused.state-layer.color | #49454F md.comp.icon-button.outlined.unselected.focused.state-layer.color
|
Pressed
| Token | Value |
|---|---|
Icon button outlined pressed icon colormd.comp.icon-button.outlined.pressed.icon.color | #49454F md.comp.icon-button.outlined.pressed.icon.color
|
Icon button outlined pressed state layer colormd.comp.icon-button.outlined.pressed.state-layer.color | #49454F md.comp.icon-button.outlined.pressed.state-layer.color
|
Icon button outlined pressed state layer opacitymd.comp.icon-button.outlined.pressed.state-layer.opacity | 10% md.comp.icon-button.outlined.pressed.state-layer.opacity
|
Icon button outlined pressed icon color - toggle (selected)md.comp.icon-button.outlined.selected.pressed.icon.color | #F5EFF7 md.comp.icon-button.outlined.selected.pressed.icon.color
|
Icon button outlined pressed state layer color - toggle (selected)md.comp.icon-button.outlined.selected.pressed.state-layer.color | #F5EFF7 md.comp.icon-button.outlined.selected.pressed.state-layer.color
|
Icon button outlined pressed icon color - toggle (unselected)md.comp.icon-button.outlined.unselected.pressed.icon.color | #49454F md.comp.icon-button.outlined.unselected.pressed.icon.color
|
Icon button outlined pressed state layer color - toggle (unselected)md.comp.icon-button.outlined.unselected.pressed.state-layer.color | #49454F md.comp.icon-button.outlined.unselected.pressed.state-layer.color
|
Icon button - Size - Small
| Token | Value |
|---|---|
Icon button small container heightmd.comp.icon-button.small.container.height | 40dp md.comp.icon-button.small.container.height |
Icon button small container shape roundmd.comp.icon-button.small.container.shape.round | Full md.comp.icon-button.small.container.shape.round
|
Icon button small container shape squaremd.comp.icon-button.small.container.shape.square | 12dp md.comp.icon-button.small.container.shape.square
|
Icon button small default leading spacemd.comp.icon-button.small.default.leading-space | 8dp md.comp.icon-button.small.default.leading-space
|
Icon button small default trailing spacemd.comp.icon-button.small.default.trailing-space | 8dp md.comp.icon-button.small.default.trailing-space
|
Icon button small icon sizemd.comp.icon-button.small.icon.size | 24dp md.comp.icon-button.small.icon.size |
Icon button small narrow leading spacemd.comp.icon-button.small.narrow.leading-space | 4dp md.comp.icon-button.small.narrow.leading-space
|
Icon button small narrow trailing spacemd.comp.icon-button.small.narrow.trailing-space | 4dp md.comp.icon-button.small.narrow.trailing-space
|
Icon button small outline widthmd.comp.icon-button.small.outlined.outline.width | 1dp md.comp.icon-button.small.outlined.outline.width |
Icon button small shape spring animation dampingmd.comp.icon-button.small.pressed.container.corner-size.motion.spring.damping | Numeric: 0.6 md.comp.icon-button.small.pressed.container.corner-size.motion.spring.damping
|
Icon button small shape spring animation stiffnessmd.comp.icon-button.small.pressed.container.corner-size.motion.spring.stiffness | Numeric: 800 md.comp.icon-button.small.pressed.container.corner-size.motion.spring.stiffness
|
Icon button small shape pressed morphmd.comp.icon-button.small.pressed.container.shape | 8dp md.comp.icon-button.small.pressed.container.shape
|
Icon button small selected container shape roundmd.comp.icon-button.small.selected.container.shape.round | 12dp md.comp.icon-button.small.selected.container.shape.round
|
Icon button small selected container shape squaremd.comp.icon-button.small.selected.container.shape.square | Full md.comp.icon-button.small.selected.container.shape.square
|
Icon button small wide leading spacemd.comp.icon-button.small.wide.leading-space | 14dp md.comp.icon-button.small.wide.leading-space
|
Icon button small wide trailing spacemd.comp.icon-button.small.wide.trailing-space | 14dp md.comp.icon-button.small.wide.trailing-space
|
Icon button - Color - Standard
Enabled
| Token | Value |
|---|---|
Icon button icon colormd.comp.icon-button.standard.icon.color | #49454F md.comp.icon-button.standard.icon.color
|
Icon button icon color - toggle (selected)md.comp.icon-button.standard.selected.icon.color | #6750A4 md.comp.icon-button.standard.selected.icon.color
|
Icon button icon color - toggle (unselected)md.comp.icon-button.standard.unselected.icon.color | #49454F md.comp.icon-button.standard.unselected.icon.color
|
Disabled
| Token | Value |
|---|---|
Icon button disabled icon colormd.comp.icon-button.standard.disabled.icon.color | #1D1B20 md.comp.icon-button.standard.disabled.icon.color
|
Icon button disabled opacitymd.comp.icon-button.standard.disabled.icon.opacity | 38% md.comp.icon-button.standard.disabled.icon.opacity |
Hovered
| Token | Value |
|---|---|
Icon button hovered icon colormd.comp.icon-button.standard.hovered.icon.color | #49454F md.comp.icon-button.standard.hovered.icon.color
|
Icon button hovered state layer colormd.comp.icon-button.standard.hovered.state-layer.color | #49454F md.comp.icon-button.standard.hovered.state-layer.color
|
Icon button hovered state layer opacitymd.comp.icon-button.standard.hovered.state-layer.opacity | 8% md.comp.icon-button.standard.hovered.state-layer.opacity
|
Icon button hovered icon color - toggle (selected)md.comp.icon-button.standard.selected.hovered.icon.color | #6750A4 md.comp.icon-button.standard.selected.hovered.icon.color
|
Icon button hovered state layer color - toggle (selected)md.comp.icon-button.standard.selected.hovered.state-layer.color | #6750A4 md.comp.icon-button.standard.selected.hovered.state-layer.color
|
Icon button hovered icon color - toggle (unselected)md.comp.icon-button.standard.unselected.hovered.icon.color | #49454F md.comp.icon-button.standard.unselected.hovered.icon.color
|
Icon button hovered state layer color - toggle (unselected)md.comp.icon-button.standard.unselected.hovered.state-layer.color | #49454F md.comp.icon-button.standard.unselected.hovered.state-layer.color
|
Focused
| Token | Value |
|---|---|
Icon button focused icon colormd.comp.icon-button.standard.focused.icon.color | #49454F md.comp.icon-button.standard.focused.icon.color
|
Icon button focused state layer colormd.comp.icon-button.standard.focused.state-layer.color | #49454F md.comp.icon-button.standard.focused.state-layer.color
|
Icon button focused state layer opacitymd.comp.icon-button.standard.focused.state-layer.opacity | 10% md.comp.icon-button.standard.focused.state-layer.opacity
|
Icon button focused icon color - toggle (selected)md.comp.icon-button.standard.selected.focused.icon.color | #6750A4 md.comp.icon-button.standard.selected.focused.icon.color
|
Icon button focused state layer color - toggle (selected)md.comp.icon-button.standard.selected.focused.state-layer.color | #6750A4 md.comp.icon-button.standard.selected.focused.state-layer.color
|
Icon button focused icon color - toggle (unselected)md.comp.icon-button.standard.unselected.focused.icon.color | #49454F md.comp.icon-button.standard.unselected.focused.icon.color
|
Icon button focused state layer color - toggle (unselected)md.comp.icon-button.standard.unselected.focused.state-layer.color | #49454F md.comp.icon-button.standard.unselected.focused.state-layer.color
|
Pressed
| Token | Value |
|---|---|
Icon button pressed icon colormd.comp.icon-button.standard.pressed.icon.color | #49454F md.comp.icon-button.standard.pressed.icon.color
|
Icon button pressed state layer colormd.comp.icon-button.standard.pressed.state-layer.color | #49454F md.comp.icon-button.standard.pressed.state-layer.color
|
Icon button pressed state layer opacitymd.comp.icon-button.standard.pressed.state-layer.opacity | 10% md.comp.icon-button.standard.pressed.state-layer.opacity
|
Icon button pressed icon color - toggle (selected)md.comp.icon-button.standard.selected.pressed.icon.color | #6750A4 md.comp.icon-button.standard.selected.pressed.icon.color
|
Icon button pressed state layer color - toggle (selected)md.comp.icon-button.standard.selected.pressed.state-layer.color | #6750A4 md.comp.icon-button.standard.selected.pressed.state-layer.color
|
Icon button pressed icon color - toggle (unselected)md.comp.icon-button.standard.unselected.pressed.icon.color | #49454F md.comp.icon-button.standard.unselected.pressed.icon.color
|
Icon button pressed state layer color - toggle (unselected)md.comp.icon-button.standard.unselected.pressed.state-layer.color | #49454F md.comp.icon-button.standard.unselected.pressed.state-layer.color
|
Icon button - Color - Tonal
Enabled
| Token | Value |
|---|---|
Icon button tonal container colormd.comp.icon-button.tonal.container.color | #E8DEF8 md.comp.icon-button.tonal.container.color
|
Icon button tonal icon colormd.comp.icon-button.tonal.icon.color | #4A4458 md.comp.icon-button.tonal.icon.color
|
Icon button tonal container color - toggle (selected)md.comp.icon-button.tonal.selected.container.color | #625B71 md.comp.icon-button.tonal.selected.container.color
|
Icon button tonal icon color - toggle (selected)md.comp.icon-button.tonal.selected.icon.color | #FFFFFF md.comp.icon-button.tonal.selected.icon.color
|
Icon button tonal container color - toggle (unselected)md.comp.icon-button.tonal.unselected.container.color | #E8DEF8 md.comp.icon-button.tonal.unselected.container.color
|
Icon button tonal icon color - toggle (unselected)md.comp.icon-button.tonal.unselected.icon.color | #4A4458 md.comp.icon-button.tonal.unselected.icon.color
|
Disabled
| Token | Value |
|---|---|
Icon button tonal disabled container colormd.comp.icon-button.tonal.disabled.container.color | #1D1B20 md.comp.icon-button.tonal.disabled.container.color
|
Icon button tonal disabled container opacitymd.comp.icon-button.tonal.disabled.container.opacity | 10% md.comp.icon-button.tonal.disabled.container.opacity |
Icon button tonal disabled icon colormd.comp.icon-button.tonal.disabled.icon.color | #1D1B20 md.comp.icon-button.tonal.disabled.icon.color
|
Icon button tonal disabled icon opacitymd.comp.icon-button.tonal.disabled.icon.opacity | 38% md.comp.icon-button.tonal.disabled.icon.opacity |
Hovered
| Token | Value |
|---|---|
Icon button tonal hovered icon colormd.comp.icon-button.tonal.hovered.icon.color | #4A4458 md.comp.icon-button.tonal.hovered.icon.color
|
Icon button tonal hovered state layer colormd.comp.icon-button.tonal.hovered.state-layer.color | #4A4458 md.comp.icon-button.tonal.hovered.state-layer.color
|
Icon button tonal hovered state layer opacitymd.comp.icon-button.tonal.hovered.state-layer.opacity | 8% md.comp.icon-button.tonal.hovered.state-layer.opacity
|
Icon button tonal hovered icon color - toggle (selected)md.comp.icon-button.tonal.selected.hovered.icon.color | #FFFFFF md.comp.icon-button.tonal.selected.hovered.icon.color
|
Icon button tonal hovered state layer color - toggle (selected)md.comp.icon-button.tonal.selected.hovered.state-layer.color | #FFFFFF md.comp.icon-button.tonal.selected.hovered.state-layer.color
|
Icon button tonal hovered icon color - toggle (unselected)md.comp.icon-button.tonal.unselected.hovered.icon.color | #4A4458 md.comp.icon-button.tonal.unselected.hovered.icon.color
|
Icon button tonal hovered state layer color - toggle (unselected)md.comp.icon-button.tonal.unselected.hovered.state-layer.color | #4A4458 md.comp.icon-button.tonal.unselected.hovered.state-layer.color
|
Focused
| Token | Value |
|---|---|
Icon button tonal focused icon colormd.comp.icon-button.tonal.focused.icon.color | #4A4458 md.comp.icon-button.tonal.focused.icon.color
|
Icon button tonal focused state layer colormd.comp.icon-button.tonal.focused.state-layer.color | #4A4458 md.comp.icon-button.tonal.focused.state-layer.color
|
Icon button tonal focused state layer opacitymd.comp.icon-button.tonal.focused.state-layer.opacity | 10% md.comp.icon-button.tonal.focused.state-layer.opacity
|
Icon button tonal focused icon color - toggle (selected)md.comp.icon-button.tonal.selected.focused.icon.color | #FFFFFF md.comp.icon-button.tonal.selected.focused.icon.color
|
Icon button tonal focused state layer color - toggle (selected)md.comp.icon-button.tonal.selected.focused.state-layer.color | #FFFFFF md.comp.icon-button.tonal.selected.focused.state-layer.color
|
Icon button tonal focused icon color - toggle (unselected)md.comp.icon-button.tonal.unselected.focused.icon.color | #4A4458 md.comp.icon-button.tonal.unselected.focused.icon.color
|
Icon button tonal focused state layer color - toggle (unselected)md.comp.icon-button.tonal.unselected.focused.state-layer.color | #4A4458 md.comp.icon-button.tonal.unselected.focused.state-layer.color
|
Pressed
| Token | Value |
|---|---|
Icon button tonal pressed icon colormd.comp.icon-button.tonal.pressed.icon.color | #4A4458 md.comp.icon-button.tonal.pressed.icon.color
|
Icon button tonal pressed state layer colormd.comp.icon-button.tonal.pressed.state-layer.color | #4A4458 md.comp.icon-button.tonal.pressed.state-layer.color
|
Icon button tonal pressed state layer opacitymd.comp.icon-button.tonal.pressed.state-layer.opacity | 10% md.comp.icon-button.tonal.pressed.state-layer.opacity
|
Icon button tonal pressed icon color - toggle (selected)md.comp.icon-button.tonal.selected.pressed.icon.color | #FFFFFF md.comp.icon-button.tonal.selected.pressed.icon.color
|
Icon button tonal pressed state layer color - toggle (selected)md.comp.icon-button.tonal.selected.pressed.state-layer.color | #FFFFFF md.comp.icon-button.tonal.selected.pressed.state-layer.color
|
Icon button tonal pressed icon color - toggle (unselected)md.comp.icon-button.tonal.unselected.pressed.icon.color | #4A4458 md.comp.icon-button.tonal.unselected.pressed.icon.color
|
Icon button tonal pressed state layer color - toggle (unselected)md.comp.icon-button.tonal.unselected.pressed.state-layer.color | #4A4458 md.comp.icon-button.tonal.unselected.pressed.state-layer.color
|
Icon button - Size - Xlarge
| Token | Value |
|---|---|
Icon button xlarge container heightmd.comp.icon-button.xlarge.container.height | 136dp md.comp.icon-button.xlarge.container.height |
Icon button xlarge container shape roundmd.comp.icon-button.xlarge.container.shape.round | Full md.comp.icon-button.xlarge.container.shape.round
|
Icon button xlarge container shape squaremd.comp.icon-button.xlarge.container.shape.square | 28dp md.comp.icon-button.xlarge.container.shape.square
|
Icon button xlarge default leading spacemd.comp.icon-button.xlarge.default.leading-space | 48dp md.comp.icon-button.xlarge.default.leading-space
|
Icon button xlarge default trailing spacemd.comp.icon-button.xlarge.default.trailing-space | 48dp md.comp.icon-button.xlarge.default.trailing-space
|
Icon button xlarge icon sizemd.comp.icon-button.xlarge.icon.size | 40dp md.comp.icon-button.xlarge.icon.size |
Icon button xlarge narrow leading spacemd.comp.icon-button.xlarge.narrow.leading-space | 32dp md.comp.icon-button.xlarge.narrow.leading-space
|
Icon button xlarge narrow trailing spacemd.comp.icon-button.xlarge.narrow.trailing-space | 32dp md.comp.icon-button.xlarge.narrow.trailing-space
|
Icon button xlarge outline widthmd.comp.icon-button.xlarge.outlined.outline.width | 3dp md.comp.icon-button.xlarge.outlined.outline.width |
Icon button xlarge shape spring animation dampingmd.comp.icon-button.xlarge.pressed.container.corner-size.motion.spring.damping | Numeric: 0.6 md.comp.icon-button.xlarge.pressed.container.corner-size.motion.spring.damping
|
Icon button xlarge shape spring animation stiffnessmd.comp.icon-button.xlarge.pressed.container.corner-size.motion.spring.stiffness | Numeric: 800 md.comp.icon-button.xlarge.pressed.container.corner-size.motion.spring.stiffness
|
Icon button xlarge shape pressed morphmd.comp.icon-button.xlarge.pressed.container.shape | 16dp md.comp.icon-button.xlarge.pressed.container.shape
|
Icon button xlarge selected container shape roundmd.comp.icon-button.xlarge.selected.container.shape.round | 28dp md.comp.icon-button.xlarge.selected.container.shape.round
|
Icon button xlarge selected container shape squaremd.comp.icon-button.xlarge.selected.container.shape.square | Full md.comp.icon-button.xlarge.selected.container.shape.square
|
Icon button xlarge wide leading spacemd.comp.icon-button.xlarge.wide.leading-space | 72dp md.comp.icon-button.xlarge.wide.leading-space
|
Icon button xlarge wide trailing spacemd.comp.icon-button.xlarge.wide.trailing-space | 72dp md.comp.icon-button.xlarge.wide.trailing-space
|
Icon button - Size - Xsmall
| Token | Value |
|---|---|
Icon button xsmall container heightmd.comp.icon-button.xsmall.container.height | 32dp md.comp.icon-button.xsmall.container.height |
Icon button xsmall container shape roundmd.comp.icon-button.xsmall.container.shape.round | Full md.comp.icon-button.xsmall.container.shape.round
|
Icon button xsmall container shape squaremd.comp.icon-button.xsmall.container.shape.square | 12dp md.comp.icon-button.xsmall.container.shape.square
|
Icon button xsmall default leading spacemd.comp.icon-button.xsmall.default.leading-space | 6dp md.comp.icon-button.xsmall.default.leading-space
|
Icon button xsmall default trailing spacemd.comp.icon-button.xsmall.default.trailing-space | 6dp md.comp.icon-button.xsmall.default.trailing-space
|
Icon button xsmall icon sizemd.comp.icon-button.xsmall.icon.size | 20dp md.comp.icon-button.xsmall.icon.size |
Icon button xsmall narrow leading spacemd.comp.icon-button.xsmall.narrow.leading-space | 4dp md.comp.icon-button.xsmall.narrow.leading-space
|
Icon button xsmall narrow trailing spacemd.comp.icon-button.xsmall.narrow.trailing-space | 4dp md.comp.icon-button.xsmall.narrow.trailing-space
|
Icon button xsmall outline widthmd.comp.icon-button.xsmall.outlined.outline.width | 1dp md.comp.icon-button.xsmall.outlined.outline.width |
Icon button xsmall shape spring animation dampingmd.comp.icon-button.xsmall.pressed.container.corner-size.motion.spring.damping | Numeric: 0.6 md.comp.icon-button.xsmall.pressed.container.corner-size.motion.spring.damping
|
Icon button xsmall shape spring animation stiffnessmd.comp.icon-button.xsmall.pressed.container.corner-size.motion.spring.stiffness | Numeric: 800 md.comp.icon-button.xsmall.pressed.container.corner-size.motion.spring.stiffness
|
Icon button xsmall shape pressed morphmd.comp.icon-button.xsmall.pressed.container.shape | 8dp md.comp.icon-button.xsmall.pressed.container.shape
|
Icon button xsmall selected container shape roundmd.comp.icon-button.xsmall.selected.container.shape.round | 12dp md.comp.icon-button.xsmall.selected.container.shape.round
|
Icon button xsmall selected container shape squaremd.comp.icon-button.xsmall.selected.container.shape.square | Full md.comp.icon-button.xsmall.selected.container.shape.square
|
Icon button xsmall wide leading spacemd.comp.icon-button.xsmall.wide.leading-space | 10dp md.comp.icon-button.xsmall.wide.leading-space
|
Icon button xsmall wide trailing spacemd.comp.icon-button.xsmall.wide.trailing-space | 10dp md.comp.icon-button.xsmall.wide.trailing-space
|
Icon button (baseline)
Enabled
| Token | Value |
|---|---|
Icon button container colormd.comp.icon-button.container.color | #6750A4 md.comp.icon-button.container.color
|
Icon button container heightmd.comp.icon-button.container.height | 40dp md.comp.icon-button.container.height |
Icon button container shape roundmd.comp.icon-button.container.shape.round | Full md.comp.icon-button.container.shape.round
|
Icon button container shape squaremd.comp.icon-button.container.shape.square | 12dp md.comp.icon-button.container.shape.square
|
Icon button default leading spacemd.comp.icon-button.default.leading-space | 8dp md.comp.icon-button.default.leading-space
|
Icon button default trailing spacemd.comp.icon-button.default.trailing-space | 8dp md.comp.icon-button.default.trailing-space
|
Icon button focus indicator colormd.comp.icon-button.focus.indicator.color | #625B71 md.comp.icon-button.focus.indicator.color
|
Icon button focus indicator offsetmd.comp.icon-button.focus.indicator.outline.offset | 2dp md.comp.icon-button.focus.indicator.outline.offset
|
Icon button focus indicator thicknessmd.comp.icon-button.focus.indicator.thickness | 3dp md.comp.icon-button.focus.indicator.thickness
|
Icon button icon colormd.comp.icon-button.icon.color | #FFFFFF md.comp.icon-button.icon.color
|
Icon button icon sizemd.comp.icon-button.icon.size | 24dp md.comp.icon-button.icon.size |
Icon button narrow leading spacemd.comp.icon-button.narrow.leading-space | 4dp md.comp.icon-button.narrow.leading-space
|
Icon button narrow trailing spacemd.comp.icon-button.narrow.trailing-space | 4dp md.comp.icon-button.narrow.trailing-space
|
Icon button shape spring animation dampingmd.comp.icon-button.pressed.container.corner-size.motion.spring.damping | Numeric: 0.6 md.comp.icon-button.pressed.container.corner-size.motion.spring.damping
|
Icon button shape spring animation stiffnessmd.comp.icon-button.pressed.container.corner-size.motion.spring.stiffness | Numeric: 800 md.comp.icon-button.pressed.container.corner-size.motion.spring.stiffness
|
Icon button shape pressed morphmd.comp.icon-button.pressed.container.shape | 8dp md.comp.icon-button.pressed.container.shape
|
Icon button container color - toggle (selected)md.comp.icon-button.selected.container.color | #6750A4 md.comp.icon-button.selected.container.color
|
Icon button selected container shape roundmd.comp.icon-button.selected.container.shape.round | 12dp md.comp.icon-button.selected.container.shape.round
|
Icon button selected container shape squaremd.comp.icon-button.selected.container.shape.square | Full md.comp.icon-button.selected.container.shape.square
|
Icon button icon color - toggle (selected)md.comp.icon-button.selected.icon.color | #FFFFFF md.comp.icon-button.selected.icon.color
|
Icon button container color - toggle (unselected)md.comp.icon-button.unselected.container.color | #F3EDF7 md.comp.icon-button.unselected.container.color
|
Icon button icon color - toggle (unselected)md.comp.icon-button.unselected.icon.color | #49454F md.comp.icon-button.unselected.icon.color
|
Icon button wide leading spacemd.comp.icon-button.wide.leading-space | 14dp md.comp.icon-button.wide.leading-space
|
Icon button wide trailing spacemd.comp.icon-button.wide.trailing-space | 14dp md.comp.icon-button.wide.trailing-space
|
Disabled
| Token | Value |
|---|---|
Icon button disabled container colormd.comp.icon-button.disabled.container.color | #1D1B20 md.comp.icon-button.disabled.container.color
|
Icon button disabled container opacitymd.comp.icon-button.disabled.container.opacity | 10% md.comp.icon-button.disabled.container.opacity |
Icon button disabled icon colormd.comp.icon-button.disabled.icon.color | #1D1B20 md.comp.icon-button.disabled.icon.color
|
Icon button disabled icon opacitymd.comp.icon-button.disabled.icon.opacity | 38% md.comp.icon-button.disabled.icon.opacity |
Hovered
| Token | Value |
|---|---|
Icon button hovered icon colormd.comp.icon-button.hovered.icon.color | #FFFFFF md.comp.icon-button.hovered.icon.color
|
Icon button hovered state layer colormd.comp.icon-button.hovered.state-layer.color | #FFFFFF md.comp.icon-button.hovered.state-layer.color
|
Icon button hovered state layer opacitymd.comp.icon-button.hovered.state-layer.opacity | 8% md.comp.icon-button.hovered.state-layer.opacity
|
Icon button hovered icon color - toggle (selected)md.comp.icon-button.selected.hovered.icon.color | #FFFFFF md.comp.icon-button.selected.hovered.icon.color
|
Icon button hovered state layer color - toggle (selected)md.comp.icon-button.selected.hovered.state-layer.color | #FFFFFF md.comp.icon-button.selected.hovered.state-layer.color
|
Icon button hovered icon color - toggle (unselected)md.comp.icon-button.unselected.hovered.icon.color | #49454F md.comp.icon-button.unselected.hovered.icon.color
|
Icon button hovered state layer color - toggle (unselected)md.comp.icon-button.unselected.hovered.state-layer.color | #49454F md.comp.icon-button.unselected.hovered.state-layer.color
|
Focused
| Token | Value |
|---|---|
Icon button focused icon colormd.comp.icon-button.focused.icon.color | #FFFFFF md.comp.icon-button.focused.icon.color
|
Icon button focused state layer colormd.comp.icon-button.focused.state-layer.color | #FFFFFF md.comp.icon-button.focused.state-layer.color
|
Icon button focused state layer opacitymd.comp.icon-button.focused.state-layer.opacity | 10% md.comp.icon-button.focused.state-layer.opacity
|
Icon button focused icon color - toggle (selected)md.comp.icon-button.selected.focused.icon.color | #FFFFFF md.comp.icon-button.selected.focused.icon.color
|
Icon button focused state layer color - toggle (selected)md.comp.icon-button.selected.focused.state-layer.color | #FFFFFF md.comp.icon-button.selected.focused.state-layer.color
|
Icon button focused icon color - toggle (unselected)md.comp.icon-button.unselected.focused.icon.color | #49454F md.comp.icon-button.unselected.focused.icon.color
|
Icon button focused state layer color - toggle (unselected)md.comp.icon-button.unselected.focused.state-layer.color | #49454F md.comp.icon-button.unselected.focused.state-layer.color
|
Pressed
| Token | Value |
|---|---|
Icon button pressed icon colormd.comp.icon-button.pressed.icon.color | #FFFFFF md.comp.icon-button.pressed.icon.color
|
Icon button pressed state layer colormd.comp.icon-button.pressed.state-layer.color | #FFFFFF md.comp.icon-button.pressed.state-layer.color
|
Icon button pressed state layer opacitymd.comp.icon-button.pressed.state-layer.opacity | 10% md.comp.icon-button.pressed.state-layer.opacity
|
Icon button pressed icon color - toggle (selected)md.comp.icon-button.selected.pressed.icon.color | #FFFFFF md.comp.icon-button.selected.pressed.icon.color
|
Icon button pressed state layer color - toggle (selected)md.comp.icon-button.selected.pressed.state-layer.color | #FFFFFF md.comp.icon-button.selected.pressed.state-layer.color
|
Icon button pressed icon color - toggle (unselected)md.comp.icon-button.unselected.pressed.icon.color | #49454F md.comp.icon-button.unselected.pressed.icon.color
|
Icon button pressed state layer color - toggle (unselected)md.comp.icon-button.unselected.pressed.state-layer.color | #49454F md.comp.icon-button.unselected.pressed.state-layer.color
|
[Deprecated] Enabled
[Deprecated] State layer
| Token | Value |
|---|---|
Icon button state layer heightmd.comp.icon-button.state-layer.height | 40dp md.comp.icon-button.state-layer.height |
Icon button state layer shapemd.comp.icon-button.state-layer.shape | Full md.comp.icon-button.state-layer.shape
|
Icon button state layer sizemd.comp.icon-button.state-layer.size | 40dp md.comp.icon-button.state-layer.size |
Icon button state layer widthmd.comp.icon-button.state-layer.width | 40dp md.comp.icon-button.state-layer.width |
[Deprecated] Hovered
[Deprecated] State layer
| Token | Value |
|---|---|
Icon button selected hover state layer colormd.comp.icon-button.selected.hover.state-layer.color | #6750A4 md.comp.icon-button.selected.hover.state-layer.color
|
Icon button selected hover state layer opacitymd.comp.icon-button.selected.hover.state-layer.opacity | 8% md.comp.icon-button.selected.hover.state-layer.opacity
|
Icon button unselected hover state layer colormd.comp.icon-button.unselected.hover.state-layer.color | #49454F md.comp.icon-button.unselected.hover.state-layer.color
|
Icon button icon unselected hover state layer opacitymd.comp.icon-button.unselected.hover.state-layer.opacity | 8% md.comp.icon-button.unselected.hover.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
Icon button selected hover icon colormd.comp.icon-button.selected.hover.icon.color | #6750A4 md.comp.icon-button.selected.hover.icon.color
|
Icon button unselected hover icon colormd.comp.icon-button.unselected.hover.icon.color | #49454F md.comp.icon-button.unselected.hover.icon.color
|
[Deprecated] Focused
[Deprecated] State layer
| Token | Value |
|---|---|
Icon button selected focus state layer colormd.comp.icon-button.selected.focus.state-layer.color | #6750A4 md.comp.icon-button.selected.focus.state-layer.color
|
Icon button selected focus state layer opacitymd.comp.icon-button.selected.focus.state-layer.opacity | 10% md.comp.icon-button.selected.focus.state-layer.opacity
|
Icon button unselected focus state layer colormd.comp.icon-button.unselected.focus.state-layer.color | #49454F md.comp.icon-button.unselected.focus.state-layer.color
|
Icon button unselected focus state layer opacitymd.comp.icon-button.unselected.focus.state-layer.opacity | 10% md.comp.icon-button.unselected.focus.state-layer.opacity
|
[Deprecated] Icon
| Token | Value |
|---|---|
Icon button selected focus icon colormd.comp.icon-button.selected.focus.icon.color | #6750A4 md.comp.icon-button.selected.focus.icon.color
|
Icon button unselected focus icon colormd.comp.icon-button.unselected.focus.icon.color | #49454F md.comp.icon-button.unselected.focus.icon.color
|
[Deprecated] Pressed (ripple)
[Deprecated] State layer
| Token | Value |
|---|---|
Icon button selected pressed state layer opacitymd.comp.icon-button.selected.pressed.state-layer.opacity | 10% md.comp.icon-button.selected.pressed.state-layer.opacity
|
Icon button unselected pressed state layer opacitymd.comp.icon-button.unselected.pressed.state-layer.opacity | 10% md.comp.icon-button.unselected.pressed.state-layer.opacity
|
[Deprecated] Icon button - Outlined
[Deprecated] Enabled
[Deprecated] Container
| Token | Value |
|---|---|
Outlined icon button container heightmd.outlined-icon-button.container.height | 40dp md.outlined-icon-button.container.height |
Outlined icon button container shapemd.outlined-icon-button.container.shape | Full md.outlined-icon-button.container.shape
|
Outlined icon button container sizemd.outlined-icon-button.container.size | 40dp md.outlined-icon-button.container.size |
Outlined icon button container widthmd.outlined-icon-button.container.width | 40dp md.outlined-icon-button.container.width |
Outlined icon button selected container colormd.outlined-icon-button.selected.container.color | #322F35 md.outlined-icon-button.selected.container.color
|
[Deprecated] Outline
| Token | Value |
|---|---|
Outlined icon button unselected outline colormd.outlined-icon-button.unselected.outline.color | #79747E md.outlined-icon-button.unselected.outline.color
|
Outlined icon button unselected outline widthmd.outlined-icon-button.unselected.outline.width | 1dp md.outlined-icon-button.unselected.outline.width |
[Deprecated] Icon
| Token | Value |
|---|---|
Outlined icon button icon sizemd.outlined-icon-button.icon.size | 24dp md.outlined-icon-button.icon.size |
Outlined icon button selected icon colormd.outlined-icon-button.selected.icon.color | #F5EFF7 md.outlined-icon-button.selected.icon.color
|
Outlined icon button unselected icon colormd.outlined-icon-button.unselected.icon.color | #49454F md.outlined-icon-button.unselected.icon.color
|
[Deprecated] Disabled
[Deprecated] Container
| Token | Value |
|---|---|
Outlined icon button disabled selected container colormd.outlined-icon-button.disabled.selected.container.color | #1D1B20 md.outlined-icon-button.disabled.selected.container.color
|
Outlined icon button disabled selected container opacitymd.outlined-icon-button.disabled.selected.container.opacity | 12% md.outlined-icon-button.disabled.selected.container.opacity |
[Deprecated] Icon
| Token | Value |
|---|---|
Outlined icon button disabled icon colormd.outlined-icon-button.disabled.icon.color | #1D1B20 md.outlined-icon-button.disabled.icon.color
|
Outlined icon button disabled icon opacitymd.outlined-icon-button.disabled.icon.opacity | 38% md.outlined-icon-button.disabled.icon.opacity |
[Deprecated] Outline
| Token | Value |
|---|---|
Outlined icon button disabled outline colormd.outlined-icon-button.disabled.outline.color | #1D1B20 md.outlined-icon-button.disabled.outline.color
|
Outlined icon button disabled outline opacitymd.outlined-icon-button.disabled.outline.opacity | 12% md.outlined-icon-button.disabled.outline.opacity |
Outlined icon button disabled unselected outline colormd.outlined-icon-button.disabled.unselected.outline.color | #1D1B20 md.outlined-icon-button.disabled.unselected.outline.color
|
Outlined icon button disabled unselected outline opacitymd.outlined-icon-button.disabled.unselected.outline.opacity | 12% md.outlined-icon-button.disabled.unselected.outline.opacity |
[Deprecated] Hovered
[Deprecated] State layer
| Token | Value |
|---|---|
Outlined icon button hover state layer opacitymd.outlined-icon-button.hover.state-layer.opacity | 8% md.outlined-icon-button.hover.state-layer.opacity
|
Outlined icon button selected hover state layer colormd.outlined-icon-button.selected.hover.state-layer.color | #F5EFF7 md.outlined-icon-button.selected.hover.state-layer.color
|
Outlined icon button unselected hover state layer colormd.outlined-icon-button.unselected.hover.state-layer.color | #49454F md.outlined-icon-button.unselected.hover.state-layer.color
|
[Deprecated] Icon
| Token | Value |
|---|---|
Outlined icon button selected hover icon colormd.outlined-icon-button.selected.hover.icon.color | #F5EFF7 md.outlined-icon-button.selected.hover.icon.color
|
Outlined icon button unselected hover icon colormd.outlined-icon-button.unselected.hover.icon.color | #49454F md.outlined-icon-button.unselected.hover.icon.color
|
[Deprecated] Focused
[Deprecated] Focus indicator
| Token | Value |
|---|---|
Outlined icon button focus indicator colormd.outlined-icon-button.focus.indicator.color | #625B71 md.outlined-icon-button.focus.indicator.color
|
Outlined icon button focus indicator offsetmd.outlined-icon-button.focus.indicator.outline.offset | 2dp md.outlined-icon-button.focus.indicator.outline.offset
|
Outlined icon button focus indicator thicknessmd.outlined-icon-button.focus.indicator.thickness | 3dp md.outlined-icon-button.focus.indicator.thickness
|
[Deprecated] State layer
| Token | Value |
|---|---|
Outlined icon button focus state layer opacitymd.outlined-icon-button.focus.state-layer.opacity | 8% md.outlined-icon-button.focus.state-layer.opacity
|
Outlined icon button selected focus state layer colormd.outlined-icon-button.selected.focus.state-layer.color | #F5EFF7 md.outlined-icon-button.selected.focus.state-layer.color
|
Outlined icon button unselected focus state layer colormd.outlined-icon-button.unselected.focus.state-layer.color | #49454F md.outlined-icon-button.unselected.focus.state-layer.color
|
[Deprecated] Icon
| Token | Value |
|---|---|
Outlined icon button focus icon colormd.outlined-icon-button.selected.focus.icon.color | #F5EFF7 md.outlined-icon-button.selected.focus.icon.color
|
Outlined icon button focus icon colormd.outlined-icon-button.unselected.focus.icon.color | #49454F md.outlined-icon-button.unselected.focus.icon.color
|
[Deprecated] Pressed (ripple)
[Deprecated] State layer
| Token | Value |
|---|---|
Outlined icon button pressed state layer opacitymd.outlined-icon-button.pressed.state-layer.opacity | 10% md.outlined-icon-button.pressed.state-layer.opacity
|
Outlined icon button selected pressed state layer colormd.outlined-icon-button.selected.pressed.state-layer.color | #F5EFF7 md.outlined-icon-button.selected.pressed.state-layer.color
|
Outlined icon button unselected pressed state layer colormd.outlined-icon-button.unselected.pressed.state-layer.color | #1D1B20 md.outlined-icon-button.unselected.pressed.state-layer.color
|
Icon
| Token | Value |
|---|---|
Outlined icon button selected pressed icon colormd.outlined-icon-button.selected.pressed.icon.color | #F5EFF7 md.outlined-icon-button.selected.pressed.icon.color
|
Outlined icon button unselected pressed icon colormd.outlined-icon-button.unselected.pressed.icon.color | #1D1B20 md.outlined-icon-button.unselected.pressed.icon.color
|
[Deprecated] Icon button - Tonal
[Deprecated] Enabled
[Deprecated] Container
| Token | Value |
|---|---|
Filled tonal icon button container colormd.comp.filled-tonal-icon-button.container.color | #E8DEF8 md.comp.filled-tonal-icon-button.container.color
|
Filled tonal icon button container heightmd.comp.filled-tonal-icon-button.container.height | 40dp md.comp.filled-tonal-icon-button.container.height |
Filled tonal icon button container shapemd.comp.filled-tonal-icon-button.container.shape | Full md.comp.filled-tonal-icon-button.container.shape
|
Filled tonal icon button container sizemd.comp.filled-tonal-icon-button.container.size | 40dp md.comp.filled-tonal-icon-button.container.size |
Filled tonal icon button container widthmd.comp.filled-tonal-icon-button.container.width | 40dp md.comp.filled-tonal-icon-button.container.width |
Filled tonal icon button selected container colormd.comp.filled-tonal-icon-button.selected.container.color | #E8DEF8 md.comp.filled-tonal-icon-button.selected.container.color
|
Filled tonal icon button unselected container colormd.comp.filled-tonal-icon-button.unselected.container.color | #E6E0E9 md.comp.filled-tonal-icon-button.unselected.container.color
|
[Deprecated] Icon
| Token | Value |
|---|---|
Filled tonal icon button icon colormd.comp.filled-tonal-icon-button.icon.color | #4A4458 md.comp.filled-tonal-icon-button.icon.color
|
Filled tonal icon button icon sizemd.comp.filled-tonal-icon-button.icon.size | 24dp md.comp.filled-tonal-icon-button.icon.size |
Filled tonal icon button toggle selected icon colormd.comp.filled-tonal-icon-button.toggle.selected.icon.color | #4A4458 md.comp.filled-tonal-icon-button.toggle.selected.icon.color
|
Filled tonal icon button toggle unselected icon colormd.comp.filled-tonal-icon-button.toggle.unselected.icon.color | #49454F md.comp.filled-tonal-icon-button.toggle.unselected.icon.color
|
[Deprecated] Disabled
[Deprecated] Container
| Token | Value |
|---|---|
Filled tonal icon button disabled container colormd.comp.filled-tonal-icon-button.disabled.container.color | #1D1B20 md.comp.filled-tonal-icon-button.disabled.container.color
|
Filled tonal icon button disabled container opacitymd.comp.filled-tonal-icon-button.disabled.container.opacity | 12% md.comp.filled-tonal-icon-button.disabled.container.opacity |
[Deprecated] Icon
| Token | Value |
|---|---|
Filled tonal icon button disabled icon colormd.comp.filled-tonal-icon-button.disabled.icon.color | #1D1B20 md.comp.filled-tonal-icon-button.disabled.icon.color
|
Filled tonal icon button disabled icon opacitymd.comp.filled-tonal-icon-button.disabled.icon.opacity | 38% md.comp.filled-tonal-icon-button.disabled.icon.opacity |
[Deprecated] Hovered
[Deprecated] State layer
| Token | Value |
|---|---|
Filled tonal icon button hover state layer colormd.comp.filled-tonal-icon-button.hover.state-layer.color | #4A4458 md.comp.filled-tonal-icon-button.hover.state-layer.color
|
Filled tonal icon button hover state layer opacitymd.comp.filled-tonal-icon-button.hover.state-layer.opacity | 8% md.comp.filled-tonal-icon-button.hover.state-layer.opacity
|
Filled tonal icon button toggle selected hover state layer colormd.comp.filled-tonal-icon-button.toggle.selected.hover.state-layer.color | #4A4458 md.comp.filled-tonal-icon-button.toggle.selected.hover.state-layer.color
|
Filled tonal icon button toggle unselected hover state layer colormd.comp.filled-tonal-icon-button.toggle.unselected.hover.state-layer.color | #49454F md.comp.filled-tonal-icon-button.toggle.unselected.hover.state-layer.color
|
[Deprecated] Icon
| Token | Value |
|---|---|
Filled tonal icon button hover icon colormd.comp.filled-tonal-icon-button.hover.icon.color | #4A4458 md.comp.filled-tonal-icon-button.hover.icon.color
|
Filled tonal icon button toggle selected hover icon colormd.comp.filled-tonal-icon-button.toggle.selected.hover.icon.color | #4A4458 md.comp.filled-tonal-icon-button.toggle.selected.hover.icon.color
|
Filled tonal icon button toggle unselected hover icon colormd.comp.filled-tonal-icon-button.toggle.unselected.hover.icon.color | #49454F md.comp.filled-tonal-icon-button.toggle.unselected.hover.icon.color
|
[Deprecated] Focused
[Deprecated] Focus indicator
| Token | Value |
|---|---|
Filled tonal icon button focus indicator colormd.comp.filled-tonal-icon-button.focus.indicator.color | #625B71 md.comp.filled-tonal-icon-button.focus.indicator.color
|
Filled tonal icon button focus indicator offsetmd.comp.filled-tonal-icon-button.focus.indicator.outline.offset | 2dp md.comp.filled-tonal-icon-button.focus.indicator.outline.offset
|
Filled tonal icon button focus indicator thicknessmd.comp.filled-tonal-icon-button.focus.indicator.thickness | 3dp md.comp.filled-tonal-icon-button.focus.indicator.thickness
|
[Deprecated] State layer
| Token | Value |
|---|---|
Filled tonal icon button focus state layer colormd.comp.filled-tonal-icon-button.focus.state-layer.color | #4A4458 md.comp.filled-tonal-icon-button.focus.state-layer.color
|
Filled tonal icon button focus state layer opacitymd.comp.filled-tonal-icon-button.focus.state-layer.opacity | 10% md.comp.filled-tonal-icon-button.focus.state-layer.opacity
|
Filled tonal icon button toggle selected focus state layer colormd.comp.filled-tonal-icon-button.toggle.selected.focus.state-layer.color | #4A4458 md.comp.filled-tonal-icon-button.toggle.selected.focus.state-layer.color
|
Filled tonal icon button toggle unselected focus state layer colormd.comp.filled-tonal-icon-button.toggle.unselected.focus.state-layer.color | #49454F md.comp.filled-tonal-icon-button.toggle.unselected.focus.state-layer.color
|
[Deprecated] Icon
| Token | Value |
|---|---|
Filled tonal icon button focus icon colormd.comp.filled-tonal-icon-button.focus.icon.color | #4A4458 md.comp.filled-tonal-icon-button.focus.icon.color
|
Filled tonal icon button toggle selected focus icon colormd.comp.filled-tonal-icon-button.toggle.selected.focus.icon.color | #4A4458 md.comp.filled-tonal-icon-button.toggle.selected.focus.icon.color
|
Filled tonal icon button toggle unselected focus icon colormd.comp.filled-tonal-icon-button.toggle.unselected.focus.icon.color | #49454F md.comp.filled-tonal-icon-button.toggle.unselected.focus.icon.color
|
[Deprecated] Pressed (ripple)
[Deprecated] State layer
| Token | Value |
|---|---|
Filled tonal icon button pressed state layer colormd.comp.filled-tonal-icon-button.pressed.state-layer.color | #4A4458 md.comp.filled-tonal-icon-button.pressed.state-layer.color
|
Filled tonal icon button pressed state layer opacitymd.comp.filled-tonal-icon-button.pressed.state-layer.opacity | 10% md.comp.filled-tonal-icon-button.pressed.state-layer.opacity
|
Filled tonal icon button toggle selected pressed state layer colormd.comp.filled-tonal-icon-button.toggle.selected.pressed.state-layer.color | #4A4458 md.comp.filled-tonal-icon-button.toggle.selected.pressed.state-layer.color
|
Filled tonal icon button toggle unselected pressed state layer colormd.comp.filled-tonal-icon-button.toggle.unselected.pressed.state-layer.color | #49454F md.comp.filled-tonal-icon-button.toggle.unselected.pressed.state-layer.color
|
Icon
| Token | Value |
|---|---|
Filled tonal icon button pressed icon colormd.comp.filled-tonal-icon-button.pressed.icon.color | #4A4458 md.comp.filled-tonal-icon-button.pressed.icon.color
|
Filled tonal icon button toggle selected pressed icon colormd.comp.filled-tonal-icon-button.toggle.selected.pressed.icon.color | #4A4458 md.comp.filled-tonal-icon-button.toggle.selected.pressed.icon.color
|
Filled tonal icon button toggle unselected pressed icon colormd.comp.filled-tonal-icon-button.toggle.unselected.pressed.icon.color | #49454F md.comp.filled-tonal-icon-button.toggle.unselected.pressed.icon.color
|
[Deprecated] Icon button - Filled
[Deprecated] Enabled
[Deprecated] Container
| Token | Value |
|---|---|
Filled icon button container colormd.comp.filled-icon-button.container.color | #6750A4 md.comp.filled-icon-button.container.color
|
Filled icon button container heightmd.comp.filled-icon-button.container.height | 40dp md.comp.filled-icon-button.container.height |
Filled icon button container shapemd.comp.filled-icon-button.container.shape | Full md.comp.filled-icon-button.container.shape
|
Filled icon button container sizemd.comp.filled-icon-button.container.size | 40dp md.comp.filled-icon-button.container.size |
Filled icon button container widthmd.comp.filled-icon-button.container.width | 40dp md.comp.filled-icon-button.container.width |
Filled icon button selected container colormd.comp.filled-icon-button.selected.container.color | #6750A4 md.comp.filled-icon-button.selected.container.color
|
Filled icon button unselected container colormd.comp.filled-icon-button.unselected.container.color | #E6E0E9 md.comp.filled-icon-button.unselected.container.color
|
[Deprecated] Icon
| Token | Value |
|---|---|
Filled icon button icon colormd.comp.filled-icon-button.icon.color | #FFFFFF md.comp.filled-icon-button.icon.color
|
Filled icon button icon sizemd.comp.filled-icon-button.icon.size | 24dp md.comp.filled-icon-button.icon.size |
Filled icon button toggle selected icon colormd.comp.filled-icon-button.toggle.selected.icon.color | #FFFFFF md.comp.filled-icon-button.toggle.selected.icon.color
|
Filled icon button toggle unselected icon colormd.comp.filled-icon-button.toggle.unselected.icon.color | #6750A4 md.comp.filled-icon-button.toggle.unselected.icon.color
|
[Deprecated] Disabled
[Deprecated] Container
| Token | Value |
|---|---|
Filled icon button disabled container colormd.comp.filled-icon-button.disabled.container.color | #1D1B20 md.comp.filled-icon-button.disabled.container.color
|
Filled icon button disabled container opacitymd.comp.filled-icon-button.disabled.container.opacity | 12% md.comp.filled-icon-button.disabled.container.opacity |
[Deprecated] Icon
| Token | Value |
|---|---|
Filled icon button disabled icon colormd.comp.filled-icon-button.disabled.icon.color | #1D1B20 md.comp.filled-icon-button.disabled.icon.color
|
Filled icon button disabled icon colormd.comp.filled-icon-button.disabled.icon.opacity | 38% md.comp.filled-icon-button.disabled.icon.opacity |
[Deprecated] Hovered
[Deprecated] State layer
| Token | Value |
|---|---|
Filled icon button hover state layer colormd.comp.filled-icon-button.hover.state-layer.color | #FFFFFF md.comp.filled-icon-button.hover.state-layer.color
|
Filled icon button hover state layer opacitymd.comp.filled-icon-button.hover.state-layer.opacity | 8% md.comp.filled-icon-button.hover.state-layer.opacity
|
Filled icon button hover state layer colormd.comp.filled-icon-button.toggle.selected.hover.state-layer.color | #FFFFFF md.comp.filled-icon-button.toggle.selected.hover.state-layer.color
|
Filled icon button hover state layer colormd.comp.filled-icon-button.toggle.unselected.hover.state-layer.color | #6750A4 md.comp.filled-icon-button.toggle.unselected.hover.state-layer.color
|
[Deprecated] Icon
| Token | Value |
|---|---|
Filled icon button hover icon colormd.comp.filled-icon-button.hover.icon.color | #FFFFFF md.comp.filled-icon-button.hover.icon.color
|
Filled icon button toggle selected hover icon colormd.comp.filled-icon-button.toggle.selected.hover.icon.color | #FFFFFF md.comp.filled-icon-button.toggle.selected.hover.icon.color
|
Filled icon button toggle unselected hover icon colormd.comp.filled-icon-button.toggle.unselected.hover.icon.color | #6750A4 md.comp.filled-icon-button.toggle.unselected.hover.icon.color
|
[Deprecated] Focused
[Deprecated] Focus indicator
| Token | Value |
|---|---|
Filled icon button focus indicator colormd.comp.filled-icon-button.focus.indicator.color | #625B71 md.comp.filled-icon-button.focus.indicator.color
|
Filled icon button focus indicator offsetmd.comp.filled-icon-button.focus.indicator.outline.offset | 2dp md.comp.filled-icon-button.focus.indicator.outline.offset
|
Filled icon button focus indicator thicknessmd.comp.filled-icon-button.focus.indicator.thickness | 3dp md.comp.filled-icon-button.focus.indicator.thickness
|
[Deprecated] State layer
| Token | Value |
|---|---|
Filled icon button focus state layer colormd.comp.filled-icon-button.focus.state-layer.color | #FFFFFF md.comp.filled-icon-button.focus.state-layer.color
|
Filled icon button focus state layer opacitymd.comp.filled-icon-button.focus.state-layer.opacity | 10% md.comp.filled-icon-button.focus.state-layer.opacity
|
Filled icon button toggle selected focus state layer colormd.comp.filled-icon-button.toggle.selected.focus.state-layer.color | #FFFFFF md.comp.filled-icon-button.toggle.selected.focus.state-layer.color
|
Filled icon button toggle unselected focus state layer colormd.comp.filled-icon-button.toggle.unselected.focus.state-layer.color | #6750A4 md.comp.filled-icon-button.toggle.unselected.focus.state-layer.color
|
[Deprecated] Icon
| Token | Value |
|---|---|
Filled icon button focus icon colormd.comp.filled-icon-button.focus.icon.color | #FFFFFF md.comp.filled-icon-button.focus.icon.color
|
Filled icon button toggle selected focus icon colormd.comp.filled-icon-button.toggle.selected.focus.icon.color | #FFFFFF md.comp.filled-icon-button.toggle.selected.focus.icon.color
|
Filled icon button toggle unselected focus icon colormd.comp.filled-icon-button.toggle.unselected.focus.icon.color | #6750A4 md.comp.filled-icon-button.toggle.unselected.focus.icon.color
|
[Deprecated] Pressed (ripple)
[Deprecated] State layer
| Token | Value |
|---|---|
Filled icon button pressed state layer colormd.comp.filled-icon-button.pressed.state-layer.color | #FFFFFF md.comp.filled-icon-button.pressed.state-layer.color
|
Filled icon button pressed state layer opacitymd.comp.filled-icon-button.pressed.state-layer.opacity | 10% md.comp.filled-icon-button.pressed.state-layer.opacity
|
Filled icon button toggle selected pressed state layer colormd.comp.filled-icon-button.toggle.selected.pressed.state-layer.color | #FFFFFF md.comp.filled-icon-button.toggle.selected.pressed.state-layer.color
|
Filled icon button toggle unselected pressed state layer colormd.comp.filled-icon-button.toggle.unselected.pressed.state-layer.color | #6750A4 md.comp.filled-icon-button.toggle.unselected.pressed.state-layer.color
|
[Deprecated] Icon
| Token | Value |
|---|---|
Filled icon button pressed icon colormd.comp.filled-icon-button.pressed.icon.color | #FFFFFF md.comp.filled-icon-button.pressed.icon.color
|
Filled icon button toggle selected pressed icon colormd.comp.filled-icon-button.toggle.selected.pressed.icon.color | #FFFFFF md.comp.filled-icon-button.toggle.selected.pressed.icon.color
|
Filled icon button toggle unselected pressed icon colormd.comp.filled-icon-button.toggle.unselected.pressed.icon.color | #6750A4 md.comp.filled-icon-button.toggle.unselected.pressed.icon.color
|