This is a support. Take note!
The support element is used for visually secondary labels (usually for supporting—but non-critical—information). They are often helpful for building form interfaces. The support element is very simple: it applies a small font size and
Intrusiveness — Supports are intended to almost fade into the background; you’re only supposed to see it if you’re looking for it. For a more intrusive element, use a label.
Supports have full tone and priority support. They will automatically look appropriate in most contexts.
Be mindful of font size and color. By default, support elements can be very small. Combined with their sometimes muted color, they can sometimes be hard to read. While they should still pass accessibility guidelines, they don’t excel at them.
Don't use color to communicate. Instead, use color to support information you communicate through text. When this isn't possible, be sure to use a
Be mindful of contrast. What looks good to you may not be readable for others. Text contrast is a good thing!
Support all navigation modes. Some people will interact with your interface using assitive technologies and/or a keyboard. Build your interface with these different modes in mind (for example, by setting the `tab-index` attribute on all interactive elements that aren't interactive by default).
||color||—||sets the color|
You can also customize this element by simply overriding any of its CSS attributes, listed
here. Contextual variable defaults (e.g.,
--color-content) and global
--family-primary) are defined here.