A digital services project by FlexionChange Indicator
feedbackCustom
Small colored dot (with optional label) marking an item as modified, added, or removed.
Custom component — no upstream reference.
Variants
Added
<span class="flex-change-indicator" data-variant="added" role="status" aria-label="New">
<span class="flex-change-indicator__dot" aria-hidden="true">
</span>
</span>Modified
<span class="flex-change-indicator" data-variant="modified" role="status" aria-label="Modified">
<span class="flex-change-indicator__dot" aria-hidden="true">
</span>
</span>Removed
<span class="flex-change-indicator" data-variant="removed" role="status" aria-label="Removed">
<span class="flex-change-indicator__dot" aria-hidden="true">
</span>
</span>With Label
Updated field
<span class="flex-change-indicator" data-variant="modified" role="status" aria-label="Updated field"><span class="flex-change-indicator__dot" aria-hidden="true"></span><span class="flex-change-indicator__label">Updated field</span></span>Contract
Documented variants
- Added — Dot indicator for a newly-added item; renders with the "added" variant color.
- Removed — Dot indicator for a removed item; renders with the "removed" variant color.
- Modified — Dot indicator for a modified item; renders with the "modified" variant color.
- WithLabel — Indicator with an explicit text label next to the dot.
Behavior promises
- ○ aria-label conveys the change type to screen readers when no visible label is present
- ○ Visible label text overrides the default aria-label
Source CSS
/* flex-change-indicator — small dot (and optional label) indicating
whether an item was modified, added, or removed. */
.flex-change-indicator {
display: inline-flex;
align-items: center;
gap: var(--flex-space-xs);
color: var(--flex-color-text-muted);
font-size: var(--flex-text-xs);
line-height: 1;
}
.flex-change-indicator__dot {
display: inline-block;
inline-size: 8px;
block-size: 8px;
border-radius: 50%;
background: var(--flex-color-text-muted);
}
.flex-change-indicator[data-variant="modified"] .flex-change-indicator__dot {
background: var(--flex-color-warning);
}
.flex-change-indicator[data-variant="added"] .flex-change-indicator__dot {
background: var(--flex-color-success);
}
.flex-change-indicator[data-variant="removed"] .flex-change-indicator__dot {
background: var(--flex-color-error);
}
.flex-change-indicator__label {
color: var(--flex-color-text);
}