role disclosure
Dropdown draft v0.4.1
A button that opens a menu of related actions.
A dropdown gathers actions that relate to one purpose (share, export, more actions on a row) behind a single button, and shows them in a menu when the button is activated. Activating an action closes the menu. The trigger is the Button component, so it takes every emphasis, intent and size of the button. A dropdown offers actions: choosing a value is the Select component, and a button whose main action sits next to its menu is the Split button component.
Tokens
From packages/tokens/src/components/dropdown.tokens.json. Path grammar: dropdown.<part>.<property>[.<option>][.<state>]. Every value aliases a semantic token.
No token matches.
Part menu (6)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
dropdown.menu.background
The menu is a level 2 surface, whatever the surface it opens over: in dark mode it stays lighter than the page and than a level 1 panel.
|
color |
{global.bg.level.2.default}
|
light
#FDFDFD
dark
#282828
|
--dropdown-menu-background
|
dropdown.menu.border-color
|
color |
{global.border.level.edge.level.2}
|
light
#DFDBDC
dark
#303030
|
--dropdown-menu-border-color
|
dropdown.menu.border-width
|
dimension |
{stroke-width.sm}
|
0.6px
|
--dropdown-menu-border-width
|
dropdown.menu.border-radius
|
dimension |
{corner-radius.sm}
|
8px
|
--dropdown-menu-border-radius
|
dropdown.menu.padding
Wider than the focus ring and its offset, so the ring of an item is never cut by the menu edge.
|
dimension |
{space.8}
|
8px
|
--dropdown-menu-padding
|
dropdown.menu.offset
Distance between the trigger and the menu.
|
dimension |
{space.4}
|
4px
|
--dropdown-menu-offset
|
Part item (16)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
dropdown.item.background.neutral.default
|
color |
{color.transparent}
|
color(srgb 0 0 0 / 0)
|
--dropdown-item-background-neutral-default
|
dropdown.item.background.neutral.hover
|
color |
{global.bg.subtle.neutral.default}
|
light
#B6B4B41a
dark
#7676761a
|
--dropdown-item-background-neutral-hover
|
dropdown.item.background.neutral.active
|
color |
{global.bg.subtle.neutral.hover}
|
light
#B6B4B426
dark
#7676764d
|
--dropdown-item-background-neutral-active
|
dropdown.item.background.error.default
|
color |
{color.transparent}
|
color(srgb 0 0 0 / 0)
|
--dropdown-item-background-error-default
|
dropdown.item.background.error.hover
|
color |
{global.bg.subtle.functional.error.default}
|
light
#FEECEA
dark
#2B0B08
|
--dropdown-item-background-error-hover
|
dropdown.item.background.error.active
|
color |
{global.bg.subtle.functional.error.hover}
|
light
#FCCDC6
dark
#3E130F
|
--dropdown-item-background-error-active
|
dropdown.item.background.disabled
|
color |
{color.transparent}
|
color(srgb 0 0 0 / 0)
|
--dropdown-item-background-disabled
|
dropdown.item.min-height
|
dimension |
{space.32}
|
32px
|
--dropdown-item-min-height
|
dropdown.item.padding-inline
|
dimension |
{space.8}
|
8px
|
--dropdown-item-padding-inline
|
dropdown.item.gap
|
dimension |
{space.8}
|
8px
|
--dropdown-item-gap
|
dropdown.item.border-radius
|
dimension |
{corner-radius.2xs}
|
2px
|
--dropdown-item-border-radius
|
dropdown.item.outline-width.focus-visible
|
dimension |
{focus.ring.width}
|
2.4px
|
--dropdown-item-outline-width-focus-visible
|
dropdown.item.outline-offset.focus-visible
|
dimension |
{focus.ring.offset}
|
4px
|
--dropdown-item-outline-offset-focus-visible
|
dropdown.item.outline-color.focus-visible
|
color |
{color.focus.ring}
|
light
#175DD6
dark
#9EE7FA
|
--dropdown-item-outline-color-focus-visible
|
dropdown.item.transition.duration
|
duration |
{duration.fast}
|
150ms
|
--dropdown-item-transition-duration
|
dropdown.item.transition.easing
|
cubicBezier |
{easing.standard}
|
cubic-bezier(0.2, 0, 0, 1)
|
--dropdown-item-transition-easing
|
Part item-icon (6)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
dropdown.item-icon.font-family
|
fontFamily |
{font.icon.family}
|
"Material Symbols Outlined"
|
--dropdown-item-icon-font-family
|
dropdown.item-icon.font-weight
|
fontWeight |
{font.icon.weight.light}
|
300
|
--dropdown-item-icon-font-weight
|
dropdown.item-icon.fill
|
number |
{font.icon.fill.off}
|
0
|
--dropdown-item-icon-fill
|
dropdown.item-icon.grade
|
number |
{font.icon.grade.normal}
|
0
|
--dropdown-item-icon-grade
|
dropdown.item-icon.optical-size
|
number |
{font.icon.optical-size.20}
|
20
|
--dropdown-item-icon-optical-size
|
dropdown.item-icon.size
|
dimension |
{size.2}
|
16px
|
--dropdown-item-icon-size
|
Part item-label (8)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
dropdown.item-label.color.neutral.default
|
color |
{global.text.on-subtle.neutral.default}
|
light
#323031
dark
#E3DDDE
|
--dropdown-item-label-color-neutral-default
|
dropdown.item-label.color.neutral.hover
|
color |
{global.text.on-subtle.neutral.default}
|
light
#323031
dark
#E3DDDE
|
--dropdown-item-label-color-neutral-hover
|
dropdown.item-label.color.neutral.active
|
color |
{global.text.on-subtle.neutral.default}
|
light
#323031
dark
#E3DDDE
|
--dropdown-item-label-color-neutral-active
|
dropdown.item-label.color.error.default
|
color |
{global.text.on-subtle.functional.error.default}
|
light
#C01619
dark
#FAA79D
|
--dropdown-item-label-color-error-default
|
dropdown.item-label.color.error.hover
|
color |
{global.text.on-subtle.functional.error.default}
|
light
#C01619
dark
#FAA79D
|
--dropdown-item-label-color-error-hover
|
dropdown.item-label.color.error.active
|
color |
{global.text.on-subtle.functional.error.default}
|
light
#C01619
dark
#FAA79D
|
--dropdown-item-label-color-error-active
|
dropdown.item-label.color.disabled
|
color |
{global.text.state.disabled.default}
|
light
#8C8C8C
dark
#9D9B9Cb2
|
--dropdown-item-label-color-disabled
|
dropdown.item-label.typography
|
typography |
{body.family}{body.size.sm}{body.weight.medium}{font.line-height.tight}{font.letter-spacing.normal}
|
{"fontFamily":"Inter","fontSize":{"value":14,"unit":"px"},"fontWeight":500,"lineHeight":1.2,"letterSpacing":{"value":0,"unit":"px"}}
|
--dropdown-item-label-typography-font-family--dropdown-item-label-typography-font-size--dropdown-item-label-typography-font-weight--dropdown-item-label-typography-line-height--dropdown-item-label-typography-letter-spacing
|
Part separator (3)
| Token | Type | Value | Resolved | CSS |
|---|---|---|---|---|
dropdown.separator.color
|
color |
{global.border.level.on-level.2}
|
light
#ECE8E9
dark
#767676
|
--dropdown-separator-color
|
dropdown.separator.width
|
dimension |
{stroke-width.sm}
|
0.6px
|
--dropdown-separator-width
|
dropdown.separator.margin-block
|
dimension |
{space.4}
|
4px
|
--dropdown-separator-margin-block
|
Parts without tokens: containertriggerindicatorgroup (they inherit from their parent).