Ring Color

Utilities for controlling the color of an element's ring.

❗ Keep in mind

To establish rings, it's essential to commence class declarations with ring.

To apply ring colors, use the following classes to define the desired color. The ring color will be applied around the element based on the specified color.

Class Name	CSS Equivalent
ring	--c-ring-color: var(--cds-sys-color-secondary); --c-ring-offset-color: var(--cds-sys-color-surface);
ring-primary	--c-ring-color: var(--cds-sys-color-primary);
ring-secondary	--c-ring-color: var(--cds-sys-color-secondary);

Setting Ring Color on Elements

Use the ring-{color} utilities to set the ring color for an element. The default color is var(--cds-sys-color-secondary).

Default Ring

Primary Ring

Secondary Ring

<div class="[...] ring">Default Ring</div>
<div class="[...] ring ring-primary">Primary Ring</div>
<div class="[...] ring ring-secondary">Secondary Ring</div>