Components
Dropdown
The floating panel that holds Cells: the list of a Selectbox, a menu, or any content.
Types
Default pads its cells 8px on every side. Full Width lets the cells reach the edges. Slot and State hold any content (for example an empty state).
Istanbul
Ankara
Izmir
Actions
Edit
Share
Delete
Tokens
| Part | Token |
|---|---|
| Background | --color-surface-level-1 |
| Padding | --layout-tiny (Full Width: block only) |
| Radius | --radius-layout-base |
| Shadow | --shadow-form-level-1 |
| Gap between cells | --border-width |
| Offset under a Selectbox | --space-form-dropdown-top |
Notes from Figma
- Cells are 1px apart (a raw itemSpacing); code uses --border-width.
- Type=State uses the State component (Empty), which is not built yet; put your own content in the meantime.
- Full Width ends with a “Cell Helper/Link” instance that no longer exists in the Cell Helper set.
- Figma has no z-index token; the Selectbox list is absolutely positioned under its box without one.
Figma to code
| Figma | React |
|---|---|
| 🎛 Type = Default | <Dropdown> |
| 🎛 Type = Full Width | <Dropdown fullWidth> |
| 🎛 Type = Slot / State | <Dropdown>{content}</Dropdown> |