toggle
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-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 serves as the opposite of the default icon, specifically designed to contrast with the background.
icon-emphasis
emphasis icon refers to an icon that is designed to draw attention and clearly indicates its interactive nature.
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
Transparent surface is intented to create a subtle and understated appearance. Suitable for the less important ui control.
surface-emphasis
Branded surface.
surface-disabled-moderate
A surface with a disabled state indicates that a particular function, feature, or control is currently disabled or unavailable.
surface-disabled-strong
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-transparent
Transparent border is intented to create a subtle and understated appearance. Suitable for the less important ui control.
border-emphasis
Border 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.
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-error
Destructive border on enabled state serves as a prominent reminder or warning, helping prevent accidental or unintended actions that could have negative implications.
border-disabled-moderate
A border with a disabled state indicates that a particular function, feature, or control is currently disabled or unavailable.
border-disabled-strong
A border with a disabled state indicates that a particular function, feature, or control is currently disabled or unavailable.