import { Cell } from '@uhg-abyss/mobile';<Cell />Leading Content
The leadingContent prop defines the cell's content on the left-hand side. This may contain the IconBrand component, a utility icon (IconSymbol), or an Avatar.
Main Content
The eyebrow prop defines the cell's eyebrow. This prop can either be text or a custom component such as Badge.
The heading prop defines the cell's heading.
The subheading prop defines the cell's subheading.
The paragraph prop defines the cell's paragraph
The trailingIcon prop placed an icon at the end of the paragraph. This will not show unless there are also defined paragraph and onPress props. When this icon is present, only the icon is pressable, not the entire cell.
A link can be displayed below the paragraph using the link prop. A link may also be passed to the value prop to be displayed on the right side of the cell.
Trailing Content
The value prop defines the value component on the right side of the cell. This is generally used to display a numerical value but can also display the Link component.
If the value prop exists, the cell cannot contain an onPress function.
The indicator prop defines the indicator component on the right side of the cell. Unlike value, this prop can co-exist with an onPress function. Either a string or a custom Component can be passed here.
The navIcon prop defines the icon that appears on the far right side of the cell. This icon will only exist when an onPress function exists.
isDisabled
isDisabled is a prop available for type radio, checkbox, and toggle.
When isDisabled is present in CellGroup, the entire group is disabled and cannot be modified. However, if isDisabled is present in Cell, only that cell is disabled and cannot be modified.
Cell Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | node | - | The eyebrow of the cell |
| heading | string | - | The heading of the cell |
| icon | node | - | Icon displayed on the left side of the cell |
| indicator | string | node | - | Indicator text or link on the right side of the cell |
| isDisabled | boolean | - | Disables the radio button, toggle, or checkbox inside of cell |
| navIcon | node | - | Icon used on the right side of the cell |
| onChange | function | - | Callback fired when the cell value is changed |
| onPress | function | - | Callback fired when the cell is pressed |
| paragraph | string | - | The paragraph of the cell |
| selectAll | boolean | - | Flag to uses cell as a select all checkbox |
| subheading | string | - | The subheading of the cell |
| type | "default" | "toggle" | "radio" | "checkbox" | - | The type of cell |
| value | any | - | The value of the cell |
Cell Classes
| Class Name | Description |
|---|---|
| abyss-cell-checkbox-button | Checkbox component |
| abyss-cell-content-wrapper | The content wrapper of the cell |
| abyss-cell-eyebrow | Cell eyebrow |
| abyss-cell-heading | Cell heading |
| abyss-cell-icon-button | The icon button at the end of the paragraph |
| abyss-cell-indicator | Cell indicator |
| abyss-cell-leading-content | The leading content. Can include IconBrand component, a utility icon, or an Avatar |
| abyss-cell-nav-icon | onPress icon to the far right of cell |
| abyss-cell-paragraph | Cell paragraph |
| abyss-cell-radio-button | Radio component |
| abyss-cell-root | Cell root |
| abyss-cell-subheading | Cell subheading |
| abyss-cell-toggle-button | ToggleSwitch component |
| abyss-cell-trailing-icon | The icon placed at the end of the paragraph |
| abyss-cell-value | Cell value |
It is the responsibility of consuming teams to make sure all components within Cell are accessible.
When possible, please test on physical devices for accessibility accuracy.
Cell Tokens
| Token Name | Value | |
|---|---|---|
| cell.color.surface.container.rest | #FFFFFF | |
| cell.color.surface.container.active | #F3F3F3 | |
| cell.color.border.content | #CBCCCD | |
| cell.color.text.label | #323334 | |
| cell.color.text.indicator | #007000 | |
| cell.color.text.value-text | #323334 | |
| cell.color.text.heading | #002677 | |
| cell.color.text.paragraph | #4B4D4F | |
| cell.color.text.subheading | #323334 | |
| cell.color.text.eyebrow | #4B4D4F | |
| cell.color.icon.leading.utility | #002677 | |
| cell.color.icon.trailing.utility | #4B4D4F | |
| cell.color.icon.trailing.interactive | #196ECF | |
| cell.border-width.bottom.content | 0.5 | |
| cell.sizing.icon.all.leading | 24 | |
| cell.sizing.icon.all.trailing | 24 | |
| cell.spacing.padding.horizontal.container | 16 | |
| cell.spacing.padding.left.container | 16 | |
| cell.spacing.padding.right.content | 16 | |
| cell.spacing.padding.vertical.content | 16 | |
| cell.spacing.gap.horizontal.content | 16 | |
| cell.spacing.gap.horizontal.trailing-text | 8 | |
| cell.spacing.gap.vertical.main-content | 2 |
Cell Classes
| V2 | V1 | Status |
|---|---|---|
| cell-checkbox-button | cell-checkbox-button | Unchanged |
| cell-content-wrapper | cell-content-wrapper | Unchanged |
| cell-eyebrow | cell-eyebrow | Unchanged |
| cell-heading | cell-title | Renamed |
| cell-icon-button | - | Added |
| - | cell-icon-right | Removed |
| - | cell-indicator | Removed |
| - | cell-info-button | Removed |
| - | cell-info-icon | Removed |
| cell-leading-content | - | Added |
| - | cell-left-wrapper | Removed |
| cell-nav-icon | - | Added |
| cell-paragraph | cell-description | Renamed |
| cell-radio-button | cell-radio-button | Unchanged |
| - | cell-right-wrapper | Removed |
| cell-root | cell-root | Unchanged |
| cell-subheading | cell-subtitle | Renamed |
| cell-toggle-button | cell-toggle-button | Unchanged |
| cell-trailing-icon | - | Added |
| - | cell-value | Removed |
Cell Props
| V2 | V1 | Status |
|---|---|---|
| eyebrow | eyebrow | Unchanged |
| - | footer | Removed |
| heading | title | Renamed |
| - | highlight | Removed |
| - | iconBackgroundColor | Removed |
| indicator | indicator | Unchanged |
| isDisabled | isDisabled | Unchanged |
| leadingContent | icon | Renamed |
| link | - | Added |
| navIcon | - | Added |
| onChange | onChange | Unchanged |
| onPress | onPress | Unchanged |
| onPressIn | onPressIn | Unchanged |
| onPressOut | onPressOut | Unchanged |
| paragraph | description | Renamed |
| - | pressIcon | Removed |
| selectAll | selectAll | Unchanged |
| subheading | subtitle | Renamed |
| - | titleColor | Removed |
| - | titleWeight | Removed |
| trailingIcon | - | Added |
| type | type | Unchanged |
| value | value | Unchanged |