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