Confirmatory
button-confirmatory / default
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.
text-inverse
Inverse text refers to the opposite color that contrasts with the background.
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.
text-disabled
Disabled text refers to a particular element is temporarily or permanently disabled and cannot be accessed or interacted with.
icon-default
Default icon refers to the standard or pre-set icon. Suitable for operating systems or software programs as a generic placeholder.
icon-inverse
Inverse icon refers to the opposite color that contrasts with the background.
icon-disabled
Disabled icon indicates that a particular function, feature, or control is currently disabled or unavailable.
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.
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.
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.
surface-transparent
Transparent surface is intented to create a subtle and understated appearance. Suitable for the less important ui control.
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.
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.
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.
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.
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.
surface-disabled
A surface with a disabled state indicates that a particular function, feature, or control is currently disabled or unavailable.
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.
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.
border-transparent
Transparent border is intented to create a subtle and understated appearance. Suitable for the less important ui control.
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.
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.
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.
border-selected-moderate
Border with a moderate selected state refers to an interaction that occurs when the ui element is active.
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.
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.
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.
border-disabled
A border with a disabled state indicates that a particular function, feature, or control is currently disabled or unavailable.
shadow / default-elevation-1
button-confirmatory / primary
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.
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.
text-disabled
Disabled text refers to a particular element is temporarily or permanently disabled and cannot be accessed or interacted with.
icon-inverse
Default icon refers to the standard or pre-set icon. Suitable for operating systems or software programs as a generic placeholder.
icon-default
Inverse text refers to the opposite color that contrasts with the background.
icon-disabled
Disabled icon indicates that a particular function, feature, or control is currently disabled or unavailable.
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.
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.
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.
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.
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.
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.
surface-disabled
A surface with a disabled state indicates that a particular function, feature, or control is currently disabled or unavailable.
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.
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.
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.
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.
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.
border-selected
Border with a moderate selected state refers to an interaction that occurs when the ui element is active.
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.
border-disabled
A border with a disabled state indicates that a particular function, feature, or control is currently disabled or unavailable.
shadow / brand-elevation-1
Tint
button-confirmatory / primary-tint
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.
text-inverse
Inverse text refers to the opposite color that contrasts with the background.
text-disabled
Disabled text refers to a particular element is temporarily or permanently disabled and cannot be accessed or interacted with.
icon-default
Default icon refers to the standard or pre-set icon. Suitable for operating systems or software programs as a generic placeholder.
icon-inverse
Inverse icon serves as the opposite of the default icon, specifically designed to contrast with the background.
icon-disabled
Disabled icon indicates that a particular function, feature, or control is currently disabled or unavailable.
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.
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.
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.
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.
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.
surface-disabled
A surface with a disabled state indicates that a particular function, feature, or control is currently disabled or unavailable.
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.
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.
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.
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.
border-selected
Border with a moderate selected state refers to an interaction that occurs when the ui element is active.
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.
border-disabled
A border with a disabled state indicates that a particular function, feature, or control is currently disabled or unavailable.
button-confirmatory / secondary-tint
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.
text-inverse
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.
text-disabled
Disabled text refers to a particular element is temporarily or permanently disabled and cannot be accessed or interacted with.
icon-default
Default icon refers to the standard or pre-set icon. Suitable for operating systems or software programs as a generic placeholder.
icon-inverse
Inverse icon serves as the opposite of the default icon, specifically designed to contrast with the background.
icon-disabled
Disabled icon indicates that a particular function, feature, or control is currently disabled or unavailable.
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.
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.
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.
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.
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.
surface-disabled
A surface with a disabled state indicates that a particular function, feature, or control is currently disabled or unavailable.
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.
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.
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.
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.
border-selected
Border with a moderate selected state refers to an interaction that occurs when the ui element is active.
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.
border-disabled
A border with a disabled state indicates that a particular function, feature, or control is currently disabled or unavailable.