We use borders to define elements and create visual separation, making content easier to scan and understand.
| Token | Value | Example |
|---|---|---|
borderInteractiveDefault border of interactive elements. | var(--sizeBorderDefault) solid var(--colorBorderInteractive) | |
borderInteractiveQuietBorders of interactive elements that should attract less attention. | var(--sizeBorderDefault) solid var(--colorBorderInteractiveQuiet) | |
borderInteractiveLoudBorders of interactive containers that should attract attention. | var(--sizeBorderDefault) solid var(--colorBorderInteractiveLoud) | |
borderInteractiveHoverBorders of interactive elements in a hover state. | var(--sizeBorderDefault) solid var(--colorBorderInteractiveHover) | |
borderInteractiveDisabledBorders of interactive elements in a disabled state. | var(--sizeBorderDefault) solid var(--colorBorderInteractiveDisabled) | |
borderInteractiveSelectedBorders of interactive elements in a selected state. | var(--sizeBorderDefault) solid var(--colorBorderInteractiveSelected) | |
borderInteractiveSelectedHoverBorders of interactive elements in a selected and hover state. | var(--sizeBorderDefault) solid var(--colorBorderInteractiveSelectedHover) | |
borderStaticBorders of non-interactive containers. | var(--sizeBorderDefault) solid var(--colorBorderStatic) | |
borderStaticLoudBorders or separators of non-interactive elements that should attract attention or are used on top of loud static backgrounds. | var(--sizeBorderDefault) solid var(--colorBorderStaticLoud) | |
borderNeutralBorders of elements that signal something neutral. | var(--sizeBorderDefault) solid var(--colorBorderNeutral) | |
borderNegativeBorders of elements that signal something negative. | var(--sizeBorderDefault) solid var(--colorBorderNegative) | |
borderNegativeHoverBorders of interactive elements that signal something negative and are in a hover state. | var(--sizeBorderDefault) solid var(--colorBorderNegativeHover) | |
borderPositiveBorders of elements that signal something has gone well. | var(--sizeBorderDefault) solid var(--colorBorderPositive) | |
borderWarningBorders of elements that signal something requires urgent attention. | var(--sizeBorderDefault) solid var(--colorBorderWarning) | |
borderInfoBorders of elements that signal important information. | var(--sizeBorderDefault) solid var(--colorBorderInfo) | |
borderDiscoverBorders of elements that signal something new in the product. | var(--sizeBorderDefault) solid var(--colorBorderDiscover) | |
sizeBorderDefault | 1px | |
sizeBorderThick | 2px | |
sizeBorderThickest | 3px | |
sizeBorder4x | 4px |
Didn't find what you were looking for?
Let us know in #team-design-systems or make a request.
Edit this page