List item
The Design System uses a modified version of the Material Design List.
- 1: Container
- 2: Headline
- 3: Supporting text (optional). Can span to 2 lines.
- 4: Trailing Supporting text (optional)
- 5: Icon (optional)
States
- 1: Enabled
- 2: Disabled
- 3: Pressed
- 4: Selected
Specs
Enabled
Details
Container
| Token | Value |
|---|---|
| ds.comp.listItem.containerOutlineColor | ds.sys.color.outlineVariant |
| ds.comp.listItem.containerOutlineWidth | 1dp |
| ds.comp.listItem.containerShape | ds.sys.shape.corner.extraSmall |
| ds.comp.listItem.containerHeight | 56dp |
| ds.comp.listItem.containerPaddingHorizontal | 10dp |
| ds.comp.listItem.containerGap | 10dp |
| ds.comp.listItem.containerColor | ds.sys.color.surfaceContainer |
Details
Headline
| Token | Value |
|---|---|
| ds.comp.listItem.headlineTypeScale | ds.sys.typeScale.bodyMedium |
| ds.comp.listItem.headlineColor | ds.sys.color.onSurface |
Details
Supporting text
| Token | Value |
|---|---|
| ds.comp.listItem.supportingTextTypeScale | ds.sys.typeScale.bodySmall |
| ds.comp.listItem.supportingTextColor | ds.sys.color.onSurfaceVariant |
Details
Icon
| Token | Value |
|---|---|
| ds.comp.listItem.iconSize | 24dp |
| ds.comp.listItem.iconColor | ds.sys.color.onSurface |
Details
Trailing supporting text
| Token | Value |
|---|---|
| ds.comp.listItem.trailingSupportingTextTypeScale | ds.sys.typeScale.titleSmall |
| ds.comp.listItem.trailingSupportingTextColor | ds.sys.color.onSurface |
Disabled
Details
Container
| Token | Value |
|---|---|
| ds.comp.listItem.disabledContainerColor | ds.sys.color.onSurface |
| ds.comp.listItem.disabledContainerOpacity | ds.sys.state.disabledContainerOpacity |
| ds.comp.listItem.disabledContainerOutlineColor | ds.sys.color.onSurface |
| ds.comp.listItem.disabledContainerOutlineOpacity | ds.sys.state.disabledContainerOpacity |
Details
Headline
| Token | Value |
|---|---|
| ds.comp.listItem.disabledHeadlineColor | ds.sys.color.onSurface |
| ds.comp.listItem.disabledHeadlineOpacity | ds.sys.state.disabledOnContainerOpacity |
Details
Supporting text
| Token | Value |
|---|---|
| ds.comp.listItem.disabledSupportingTextColor | ds.sys.color.onSurface |
| ds.comp.listItem.disabledSupportingTextOpacity | ds.sys.state.disabledOnContainerOpacity |
Details
Icon
| Token | Value |
|---|---|
| ds.comp.listItem.disabledIconColor | ds.sys.color.onSurface |
| ds.comp.listItem.disabledIconOpacity | ds.sys.state.disabledOnContainerOpacity |
Details
Trailing supporting text
| Token | Value |
|---|---|
| ds.comp.listItem.disabledTrailingSupportingTextColor | ds.sys.color.onSurface |
| ds.comp.listItem.disabledTrailingSupportingTextOpacity | ds.sys.state.disabledOnContainerOpacity |
Pressed
Details
State Layer
| Token | Value |
|---|---|
| ds.comp.listItem.pressedStateLayerColor | ds.sys.color.onSurface |
| ds.comp.listItem.pressedStateLayerOpacity | ds.sys.state.pressedStateLayerOpacity |
Details
Headline
| Token | Value |
|---|---|
| ds.comp.listItem.pressedHeadlineColor | ds.sys.color.onSurface |
Details
Supporting text
| Token | Value |
|---|---|
| ds.comp.listItem.pressedSupportingTextColor | ds.sys.color.onSurfaceVariant |
Details
Icon
| Token | Value |
|---|---|
| ds.comp.listItem.pressedIconColor | ds.sys.color.onSurface |
Details
Trailing supporting text
| Token | Value |
|---|---|
| ds.comp.listItem.pressedTrailingSupportingTextColor | ds.sys.color.onSurface |
Selected
Details
State Layer
| Token | Value |
|---|---|
| ds.comp.listItem.selectedStateLayerColor | ds.sys.color.onPrimaryContainer |
| ds.comp.listItem.selectedStateLayerOpacity | ds.sys.state.pressedStateLayerOpacity |
React Native
<ListItem headline="Visa**4567" icon="check_circle" supportingText="15 de julio" trailingSupportingText="$ 1,615.00" />
Props
| Prop | Type |
|---|---|
| headline | string |
| icon (optional) | IconNames |
| supportingText (optional) | string |
| trailingSupportingText (optional) | string |
| onPress (optional) | (event: GestureResponderEvent) => void |
| disabled (optional) | boolean |
| iconStyle (optional) | TextStyle |
| headlineTextStyle (optional) | TextStyle |
| supportingTextStyle (optional) | TextStyle |
| trailingSupportingTextStyle (optional) | TextStyle |