Text Button
- 1: Label
- 2: Icon (optional)
States
- 1: Enabled
- 2: Disabled
- 3: Pressed
Specs
Enabled
Details
Container
| Token | Value |
|---|---|
| ds.comp.textButton.containerShape | ds.sys.shape.corner.extraSmall |
| ds.comp.textButton.containerPaddingVertical | 10dp |
| ds.comp.textButton.containerPaddingHorizontal | 12dp |
| ds.comp.textButton.containerGap | 8dp |
Details
Label
| Token | Value |
|---|---|
| ds.comp.textButton.labelTypeScale | ds.sys.typeScale.labelLarge |
| ds.comp.textButton.labelColor | ds.sys.color.primary |
Details
Icon
| Token | Value |
|---|---|
| ds.comp.textButton.iconSize | 18dp |
| ds.comp.textButton.iconColor | ds.sys.color.primary |
Disabled
Details
Label
| Token | Value |
|---|---|
| ds.comp.textButton.disabledLabelColor | ds.sys.color.onSurface |
| ds.comp.textButton.disabledLabelOpacity | ds.sys.state.disabledOnContainerOpacity |
Details
Icon
| Token | Value |
|---|---|
| ds.comp.textButton.disabledIconColor | ds.sys.color.onSurface |
| ds.comp.textButton.disabledIconOpacity | ds.sys.state.disabledOnContainerOpacity |
Pressed
Details
State Layer
| Token | Value |
|---|---|
| ds.comp.textButton.pressedStateLayerColor | ds.sys.color.primary |
| ds.comp.textButton.pressedStateLayerOpacity | ds.sys.state.pressedStateLayerOpacity |
Details
Label
| Token | Value |
|---|---|
| ds.comp.textButton.pressedLabelColor | ds.sys.color.primary |
Details
Icon
| Token | Value |
|---|---|
| ds.comp.textButton.pressedIconColor | ds.sys.color.primary |
React Native
<TextButton title="My Button" icon="search" />
Props
| Prop | Type |
|---|---|
| title | string |
| icon (optional) | IconNames |
| onPress (optional) | (event: GestureResponderEvent) => void |
| disabled (optional) | boolean |