Standard Icon Button
States
- 1: Enabled
- 2: Disabled
- 3: Pressed
Specs
Enabled
Details
Icon
| Token | Value |
|---|---|
| ds.comp.standardIconButton.iconSize | 24dp |
| ds.comp.standardIconButton.iconColor | ds.sys.color.onSurface |
Details
State Layer
| Token | Value |
|---|---|
| ds.comp.standardIconButton.stateLayerShape | ds.sys.shape.corner.full |
| ds.comp.standardIconButton.stateLayerWidth | 40dp |
| ds.comp.standardIconButton.stateLayerHeight | 40dp |
Disabled
Details
Icon
| Token | Value |
|---|---|
| ds.comp.standardIconButton.disabledIconColor | ds.sys.color.onSurface |
| ds.comp.standardIconButton.disabledIconOpacity | ds.sys.state.disabledOnContainerOpacity |
Pressed
Details
State Layer
| Token | Value |
|---|---|
| ds.comp.standardIconButton.pressedStateLayerColor | ds.sys.color.onSurface |
| ds.comp.standardIconButton.pressedStateLayerOpacity | ds.sys.state.pressedStateLayerOpacity |
Details
Icon
| Token | Value |
|---|---|
| ds.comp.textButton.pressedIconColor | ds.sys.color.onSurface |
React Native
<StandardIconButton name="search" />
Props
| Prop | Type |
|---|---|
| name | IconNames |
| onPress (optional) | (event: GestureResponderEvent) => void |
| disabled (optional) | boolean |