Navigation
Cell
Storybook
Cell
Storybook
With the Cell you can create an interactive cell that can have a button or an icon, along with some text. The cell can be enabled or disabled, selected or unselected, and may or may not have a border. Cell has a link that can be clicked.
Imports
1import { Cell} from 'dd360-ds'Usage
1import { Cell } from 'dd360-ds'
2
3<Cell>Example Cell</Cell>
4Size
With the prop size you can customize the size of the cell
1import { Cell } from 'dd360-ds'
2
3<Cell size="small">Cell Size Small Example</Cell>
4<Cell size="medium">Cell Size Medium Example</Cell>
5<Cell size="large">Cell Size Large Example</Cell>
6<Cell size="extraLarge">Cell Size ExtraLarge Example</Cell>
7Icon
With the prop icon you can add an icon
1import { Cell } from 'dd360-ds'
2import DynamicHeroIcon from 'dd360-ds/DynamicHeroIcon'
3
4<Cell icon={<DynamicHeroIcon icon="CalendarIcon" />}>Cell Icon Example</Cell>
5Border
With the prop border you can choose whether the cell has a border
1import { Cell } from 'dd360-ds'
2
3<Cell border>Cell Border Example</Cell>
4Disabled
With the prop disabled you can disable the cell
1import { Cell } from 'dd360-ds'
2
3<Cell disabled>Cell Disabled Example</Cell>
4Selected
With the prop selected a style is added to the cell to know that it was selected
1import { Cell } from 'dd360-ds'
2
3<Cell selected>Cell Selected Example</Cell>
4API Reference
| Name | Types | Default |
|---|---|---|
| "size" | small medium large extraLarge | medium |
| "border" | boolean | false |
| "disabled" | boolean | false |
| "selected" | boolean | false |
| "icon" | ReactNode | - |
| "onClick" | function | - |
| "children" | ReactNode | - |
| "className" | string | - |