import { Cell } from '@uhg-abyss/mobile';() => { return ( <Cell eyebrow="eyebrow" heading="Cell Heading" subheading="Subheading" paragraph="Paragraph content here" /> );};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 places an icon at the end of the heading. This will not show unless there is also a defined heading prop. 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.
When a link prop is present inside the cell, the cell itself is not pressable. The link element handles its own tap interaction independently. The indicator prop can still co-exist with link, but onPress will not fire on the cell row.
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 |
| trailingIcon | node | - | The icon placed next to the heading text |
| type | "default" | "toggle" | "radio" | "checkbox" | - | The type of cell |
| value | any | - | The value of the cell |
Cell Classes
| Class Name | Description |
|---|---|
| abyss-cell-root | Cell root |
| abyss-cell-leading-content | The leading content. Can include IconBrand component, a utility icon, or an Avatar |
| abyss-cell-content-wrapper | The content wrapper of the cell |
| abyss-cell-eyebrow | Cell eyebrow |
| abyss-cell-heading | Cell heading |
| abyss-cell-subheading | Cell subheading |
| abyss-cell-paragraph | Cell paragraph |
| abyss-cell-value | Cell value |
| abyss-cell-radio-button | Radio component |
| abyss-cell-checkbox-button | Checkbox component |
| abyss-cell-toggle-button | ToggleSwitch component |
| abyss-cell-indicator | Cell indicator |
| abyss-cell-nav-icon | onPress icon to the far right of cell |
| abyss-cell-trailing-icon | The icon placed at the end of the heading |
| abyss-cell-icon-button | The icon button at the end of the heading |
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 |