Split

Definition: A split button is an element that combines the functionality of a regular button with a dropdown menu in a single control.

Confirmatory

button-confirmatory / default

#252626
text-default
Default text refers to the main or prominent textual content. Suitable for important headlines, titles, or primary information that requires the most attention.
Token set
component
Documentation
-
#ffffff
text-inverse
Inverse text refers to the opposite color that contrasts with the background.
Token set
component
Documentation
-
#494a4a
text-secondary
Secondary text is for supporting or supplementary information. Often used for descriptions, labels, captions, or any content that is less significant than the default text but still relevant to the user experience.
Token set
component
Documentation
-
#8a8a8a
text-disabled
Disabled text refers to a particular element is temporarily or permanently disabled and cannot be accessed or interacted with.
Token set
component
Documentation
-
#494a4a
icon-default
Default icon refers to the standard or pre-set icon. Suitable for operating systems or software programs as a generic placeholder.
Token set
component
Documentation
-
#ffffff
icon-inverse
Inverse icon refers to the opposite color that contrasts with the background.
Token set
component
Documentation
-
#8a8a8a
icon-disabled
Disabled icon indicates that a particular function, feature, or control is currently disabled or unavailable.
Token set
component
Documentation
-
#ffffff
surface-enabled
Surface on enabled state refers to the default appearance and behavior of a clickable element. It represents the initial or resting state, typically before any user interaction has occurred.
Token set
component
Documentation
-
#f2f2f2
surface-muted
Muted surface indicates that the ui element is not editable and is intended for viewing purposes only. Suitable for read-only UI controls.
Token set
component
Documentation
-
#d2eafa
surface-hover
Surface on hover state refers to an interaction that the ui element is interactive and clickable. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
Token set
component
Documentation
-
#ffffff
surface-transparent
Transparent surface is intented to create a subtle and understated appearance. Suitable for the less important ui control.
Token set
component
Documentation
-
#ffffff
surface-focused
Surface on focused state refers to an interaction that occurs when the ui element is focused through keyboard navigation or other assistive technologies.
Token set
component
Documentation
-
#dadada
surface-pressed
Surface with pressed state is a stemporary visual alteration that provides immediate feedback to the user, confirming that their input has been recognized.
Token set
component
Documentation
-
#f2f2f2
surface-selected-moderate
Surface with moderate selected state refers to an interaction that occurs when the ui element is active. Suitable for subtle appearance that should not dominate the overall design when the ui element is active.
Token set
component
Documentation
-
#d2eafa
surface-selected-moderate:hover
Surface hovering over a moderate selected state refers to an interaction that occurs when the ui element is hovered on a current selection. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
Token set
component
Documentation
-
#316245
surface-selected-strong
Surface with strong selected state refers to an interaction that occurs when the ui element is active. Suitable for prominent call-to-actions.
Token set
component
Documentation
-
#316245
surface-selected-strong:hover
Surface hovering over a strong selected state refers to an interaction that occurs when the ui element is hovered on a current selection. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
Token set
component
Documentation
-
#ffffff
surface-disabled
A surface with a disabled state indicates that a particular function, feature, or control is currently disabled or unavailable.
Token set
component
Documentation
-
#8a8a8a
border-enabled
Border on enabled state refers to the default appearance and behavior of a clickable element. It represents the initial or resting state, typically before any user interaction has occurred.
Token set
component
Documentation
-
#f2f2f2
border-muted
Muted border indicates that the ui element is not editable and is intended for viewing purposes only. Suitable for read-only UI controls.
Token set
component
Documentation
-
#ffffff
border-transparent
Transparent border is intented to create a subtle and understated appearance. Suitable for the less important ui control.
Token set
component
Documentation
-
#1482cc
border-hover
Border on hover state refers to an interaction that the ui element is clickable. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
Token set
component
Documentation
-
#1482cc
border-focused
Border on focused state refers to an interaction that occurs when the ui element is focused through keyboard navigation or other assistive technologies.
Token set
component
Documentation
-
#8a8a8a
border-pressed
Border with pressed state is a stemporary visual alteration that provides immediate feedback to the user, confirming that their input has been recognized.
Token set
component
Documentation
-
#8a8a8a
border-selected-moderate
Border with a moderate selected state refers to an interaction that occurs when the ui element is active.
Token set
component
Documentation
-
#1482cc
border-selected-moderate:hover
Border hovering over a moderate selected state refers to an interaction that occurs when the ui element is hovered on a current selection. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
Token set
component
Documentation
-
#316245
border-selected-strong
Border with strong selected state refers to an interaction that occurs when the ui element is active. Suitable for prominent call-to-actions.
Token set
component
Documentation
-
#316245
border-selected-strong:hover
Border hovering over a strong selected state refers to an interaction that occurs when the ui element is hovered on a current selection. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
Token set
component
Documentation
-
#c0c0c0
border-disabled
A border with a disabled state indicates that a particular function, feature, or control is currently disabled or unavailable.
Token set
component
Documentation
-
0 2px 4px 0 rgba(37,38,38,0.08)
0 2px 4px 0 rgba(0,0,0,0.12)
shadow / default-elevation-1

button-confirmatory / primary

#252626
text-inverse
Default text refers to the main or prominent textual content. Suitable for important headlines, titles, or primary information that requires the most attention.
Token set
component
Documentation
-
#ffffff
text-default
Secondary text is for supporting or supplementary information. Often used for descriptions, labels, captions, or any content that is less significant than the default text but still relevant to the user experience.
Token set
component
Documentation
-
#8a8a8a
text-disabled
Disabled text refers to a particular element is temporarily or permanently disabled and cannot be accessed or interacted with.
Token set
component
Documentation
-
#494a4a
icon-inverse
Default icon refers to the standard or pre-set icon. Suitable for operating systems or software programs as a generic placeholder.
Token set
component
Documentation
-
#ffffff
icon-default
Inverse text refers to the opposite color that contrasts with the background.
Token set
component
Documentation
-
#8a8a8a
icon-disabled
Disabled icon indicates that a particular function, feature, or control is currently disabled or unavailable.
Token set
component
Documentation
-
#2d7048
surface-enabled
Surface on enabled state refers to the default appearance and behavior of a clickable element. It represents the initial or resting state, typically before any user interaction has occurred.
Token set
component
Documentation
-
#2d7048
surface-transparent
Surface on enabled state refers to the default appearance and behavior of a clickable element. It represents the initial or resting state, typically before any user interaction has occurred.
Token set
component
Documentation
-
#2d7048
surface-hover
Surface on hover state refers to an interaction that the ui element is interactive and clickable. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
Token set
component
Documentation
-
#2d7048
surface-focused
Surface on focused state refers to an interaction that occurs when the ui element is focused through keyboard navigation or other assistive technologies.
Token set
component
Documentation
-
#254934
surface-pressed
Surface with pressed state is a stemporary visual alteration that provides immediate feedback to the user, confirming that their input has been recognized.
Token set
component
Documentation
-
#316245
surface-selected
Surface with moderate selected state refers to an interaction that occurs when the ui element is active. Suitable for subtle appearance that should not dominate the overall design when the ui element is active.
Token set
component
Documentation
-
#316245
surface-selected:hover
Surface hovering over a moderate selected state refers to an interaction that occurs when the ui element is hovered on a current selection. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
Token set
component
Documentation
-
#ffffff
surface-disabled
A surface with a disabled state indicates that a particular function, feature, or control is currently disabled or unavailable.
Token set
component
Documentation
-
#2d7048
border-transparent
Surface on enabled state refers to the default appearance and behavior of a clickable element. It represents the initial or resting state, typically before any user interaction has occurred.
Token set
component
Documentation
-
#2d7048
border-enabled
Border on enabled state refers to the default appearance and behavior of a clickable element. It represents the initial or resting state, typically before any user interaction has occurred.
Token set
component
Documentation
-
#2d7048
border-hover
Border on hover state refers to an interaction that the ui element is clickable. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
Token set
component
Documentation
-
#1482cc
border-focused
Border on focused state refers to an interaction that occurs when the ui element is focused through keyboard navigation or other assistive technologies.
Token set
component
Documentation
-
#254934
border-pressed
Border with pressed state is a stemporary visual alteration that provides immediate feedback to the user, confirming that their input has been recognized.
Token set
component
Documentation
-
#316245
border-selected
Border with a moderate selected state refers to an interaction that occurs when the ui element is active.
Token set
component
Documentation
-
#316245
border-selected:hover
Border hovering over a moderate selected state refers to an interaction that occurs when the ui element is hovered on a current selection. It's primarily used in desktop or laptop interfaces where cursor-based interactions are prevalent.
Token set
component
Documentation
-
#c0c0c0
border-disabled
A border with a disabled state indicates that a particular function, feature, or control is currently disabled or unavailable.
Token set
component
Documentation
-
0 2px 4px 0 rgba(49,98,69,0.16)
0 2px 4px 0 rgba(49,98,69,0.12)
shadow / brand-elevation-1