Dot

Dots provide a subtle color cue to place beside text or other elements.

Default

Dots can be used easily with any of the standard Sage colors.

Custom color

Dots can also be set to use a custom hex color. Note that the SageTokens::COLOR_PALETTE exposes additional hex colors for the full Sage color palette.

With text

Dots can simply be placed inside styled typography elements, and works best with the specs shown below. Additional, it can be placed as an item inside a flex row or grid template for improved alignment with other type specs or other elements altogether.

Body small spec

Body spec

Heading 6 spec

Heading 5 spec

Heading 4 spec

Sage Component

SageDot

<h3>Default</h3>

<%= md("Dots can be used easily with any of the standard Sage colors.") %>

<%= sage_component SageDot, {} %>
<%= sage_component SageDot, { color: "primary" } %>
<%= sage_component SageDot, { color: "red" } %>
<%= sage_component SageDot, { color: "yellow" } %>
<%= sage_component SageDot, { color: "purple" } %>
<%= sage_component SageDot, { color: "grey" } %>

<h3>Custom color</h3>
<%= md("
Dots can also be set to use a custom hex color.
Note that the `SageTokens::COLOR_PALETTE` exposes additional hex colors for the full Sage color palette.
") %>
<%= sage_component SageDot, { color: SageTokens::COLOR_PALETTE[:PRIMARY_100] } %>
<%= sage_component SageDot, { color: "#ef45c2" } %>

<h3>With text</h3>
<%= md("
Dots can simply be placed inside styled typography elements, and works best with the specs shown below.
Additional, it can be placed as an item inside a flex row or grid template
for improved alignment with other type specs or other elements altogether.
") %>
<p class="<%= SageClassnames::TYPE::BODY_SMALL %>">
  <%= sage_component SageDot, {} %>
  Body small spec
</p>
<p class="<%= SageClassnames::TYPE::BODY %>">
  <%= sage_component SageDot, {} %>
  Body spec
</p>
<p class="<%= SageClassnames::TYPE::HEADING_6 %>">
  <%= sage_component SageDot, {} %>
  Heading 6 spec
</p>
<p class="<%= SageClassnames::TYPE::HEADING_5 %>">
  <%= sage_component SageDot, {} %>
  Heading 5 spec
</p>
<p class="<%= SageClassnames::TYPE::HEADING_4 %>">
  <%= sage_component SageDot, {} %>
  Heading 4 spec
</p>

Property	Description	Type	Default
`label`	Provide an accessible label for the dot. Without this set, the element will instead be set to `aria-hidden="true".	`String`	`nil`
`color`	Provide either a Sage color name or a custom Hex color value. Use `SageTokens::COLOR_PALETTE` for hex values from the full Sage color palette.	Hex color string or `["blue", "green", "mercury", "primary", "sage", "yellow", "red", "orange", "purple", "charcoal", "grey", "white", "black"]`	`"sage"`

Don't