Icon Button / Link

Live Demo

Styles

Sizes

States

As link vs button

1. Summary

Used by

As a base atom, Icon Button is consumed by other components rather than composing them (the reciprocal of a composite's “Composed of”). See docs/design-system-recommendations.md §F.

• Social / Share Links — each social/share affordance is an Icon Button (--circle, --brand).
• Navigation — footer social links, search/menu actions.
• Article Layout — the share row.
• Close affordances on Modal, Offcanvas, Toast, Alerts.

2. Design Tokens

3. Authoring Fields

4. Validation Rules

No author-managed content beyond an accessible label, so there are no authoring validation rules. Accessibility requirements are covered in Section 8 (Accessibility).

5. Content Guidance

Do

• Always provide a clear, action-oriented accessible label ("Share on LinkedIn", "Close dialog", "Copy link").
• Use only for universally-understood icons; if an icon is ambiguous, use a text Button instead.
• Use --brand for recognised platform colours (social), outline on light surfaces, solid for emphasis.

Don't

• Never ship an icon button without an accessible label.
• Don't shrink below the sm (32px) size — keep the ≥24px target.
• Don't use for primary CTAs — those need a visible text label (use Button).

6. Semantic HTML

<!-- Action (in-page) -->
<button type="button" class="caat-icon-btn caat-icon-btn--outline" aria-label="Copy link">
  <i class="bi bi-link-45deg" aria-hidden="true"></i>
</button>

<!-- Link (navigation / external) -->
<a href="https://linkedin.com/company/caat-pension"
   class="caat-icon-btn caat-icon-btn--circle caat-icon-btn--brand"
   style="--caat-icon-btn-brand:#0a66c2;"
   aria-label="CAAT on LinkedIn (opens in a new tab)" target="_blank" rel="noopener">
  <i class="bi bi-linkedin" aria-hidden="true"></i>
</a>

7. CSS Contract

8. Accessibility

9. SEO

Transient / structural UI with no indexable content of its own — no SEO markup required. Ensure any content this component wraps or reveals stays server-rendered and crawlable.

10. Analytics

Analytics are captured through the shared data-analytics-component attribute on the component root (emitted automatically) and reported to the central data layer. Event names and payloads follow the organisation's standard analytics schema — defined centrally with the analytics team, not invented per component — so no bespoke tracking is specified here.

11. AEM Implementation Notes

• Resource type: caat/components/icon-button.
• Sling model exposes icon, label, link, style, shape, size, brandColor.
• HTL renders <a> when link is set, else <button>.
• Primarily used as a building block via Sling delegation from Social Links, Navigation, etc.

12. Dialog Model (cq:dialog)

Not authored directly. The icon button is a sub-element emitted and configured by its host component (or generated from page structure), so it has no standalone cq:dialog — any options are exposed through the host component's dialog.

13. QA Checklist

14. Definition of Done

• All style/shape/size variants render from tokens — no hard-coded colours.
• aria-label enforced by the dialog (required field).
• Accessibility audit — no violations; keyboard + focus verified.
• Consumed by Social/Share Links; duplication in article/nav removed.
• QA checklist signed off.