The Anchor more like a component that's used by other components to position small items within a larger composition, such as a badge on a button, a status dot on an avatar, or an unread count.
Examples
Badge on a button
<span class="anchor">
<button class="button is-sm" type="button">Inbox</button>
<span class="anchor-overlay badge is-danger">3</span>
</span>
Dot on an icon
<span class="anchor">
<svg
class="icon is-lg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
<path d="M13.73 21a2 2 0 0 1-3.46 0" />
</svg>
<span
class="anchor-overlay is-center"
style="
inline-size: 0.625rem;
block-size: 0.625rem;
border-radius: var(--radius-circle);
background: var(--color-danger);
border: 2px solid var(--color-surface);
"
></span>
</span>
Reference
Source: src/css/composition.css
Applies to
.anchor
Classes
| Class | Kind | Description |
|---|---|---|
.is-center | variant | Center the overlay on the top-end corner |
Tokens
| Token | Default | Description |
|---|---|---|
--anchor-offset | -0.75em | Position offset for the overlay child |