Toolbar

Provides access to commonly used actions related to the user's current view or task

Layout

Toolbars are typically positioned at the top of your UI and remain fixed (do not move as the user scrolls). They span the entire width of the page and do not wrap to a single line.

Actions within a toolbar should be logically grouped to help users locate related subtasks. Use dividers and white space to indicate these groupings.

Visual of grouped content

Destructive actions or ones that significantly impact a user's work (e.g., delete, remove) should be grouped separately from other options.

Visual of separating destructive actions

Color application

Small / Medium

	Design token	Value	Extra info
(1) Container	NeutralBackground1.Rest	#FFFFFF
(2) Dropdown			Follow dropdown specs
(3) Icon buttons		#295CAD	Follow button specs for Secondary states
(4) Divider	NeutralStroke1.Rest	#E4E7E7
(5) Input			Follow input specs

Large

	Design token	Value	Extra info
(1) Container	NeutralBackground1.Rest	#FFFFFF
(2) Dropdown			Follow dropdown specs
(3) Icon buttons		#295CAD	Follow button specs for Secondary states
(4) Divider	NeutralStroke1.Rest	#E4E7E7
(5) Input			Follow input specs

Size options

Delish has 3 size options for a toolbar: small, medium and large. Medium is the default size.

Visual of size options | Note toolbar is cut-off on the right side to accurate depict size

Specs by size

	Design token	Value	Extra info
(1) Container		Height: 32px Width: 100% of container
(2) Container radius	Global.Corner.Radius.20	2px
(3) Dropdown			Follow dropdown specs for Small
(4) Icon buttons			Follow button specs for Medium
(5) Divider			Follow divider specs and spacing for Small
(6) Input			Follow input specs for Small

	Design token	Value	Extra info
(1) Container		Height: 40px Width: 100% of container
(2) Container radius	Global.Corner.Radius.20	2px
(3) Dropdown			Follow dropdown specs for Small
(4) Icon buttons			Follow button specs for Medium
(5) Divider			Follow divider specs and spacing for Small
(6) Input			Follow input specs for Small

	Design token	Value	Extra info
(1) Container		Height: 48px Width: 100% of container
(2) Container radius	Global.Corner.Radius.20	2px
(3) Button			Follow Primary button specs for Medium
(4) Link with icon			Follow link specs
(5) Divider			Follow divider specs and spacing for Small
(6) Input			Follow input specs for Medium

Spacing by size

	Design token	Value
Padding between start and end content	spacingHorizontalXL	48px
Container: padding top/bottom	spacingVerticalXS	4px
Container: padding left/right	spacingHorizontalXS	4px
1st dropdown: padding left / right	spacingHorizontalSNudge	6px
Padding between subtle buttons	spacingHorizontalNone	0px
Divider: padding top/bottom	spacingVerticalSNudge	6px
End content: Search padding left/right	spacingHorizontalSNudge	6px

	Design token	Value
Padding between start and end content	spacingHorizontalXL	48px
Container: padding top/bottom	spacingVerticalXS	4px
Container: padding left/right	spacingHorizontalS	8px
1st dropdown: padding left / right	spacingHorizontalSNudge	6px
Padding between subtle buttons	spacingHorizontalNone	0px
Divider: padding top/bottom	spacingVerticalSNudge	6px
End content: Search padding left/right	spacingHorizontalSNudge	6px

	Design token	Value
Padding between start and end content	spacingHorizontalXL	48px
Container: padding top/bottom	spacingVerticalS	8px
Primary button: padding left	spacingHorizontalMNudge	16px
Primary button: padding right	spacingHorizontalS	8px
Padding between subtle buttons	spacingHorizontalNone	0px
Divider: padding top/bottom	spacingVerticalSNudge	6px
End content: Search padding right	spacingHorizontalM	16px