id: icon_button
label: Icon Button
family: family-f-data
category: Action
intent: Trigger an action with an icon button
description: Button with icon only
composable: false
capabilities: Disabled
required_parts: []
optional_parts: []
tags: ["icon-button", "icon", "action", "close", "delete", "edit"]
keywords:
pain: Icon buttons miss accessibility labels and loading state handling
promise: Accessibility and loading state enforced in button contract
why: |
IconButtonPrimitive requires aria-label and encodes loading and disabled states. ARIA attributes are derived automatically. This guarantees accessible and predictable behavior.
rules: ["CR-001", "CR-004"]
use_cases: ["close actions", "toolbar buttons"]
related: ["button", "button_group", "copy_button", "link"]
file: icon_button_ui.css
tokens: icon-button-*, size-*, radius-*, motion-*, font-*, state-*, button-*, focus-ring-*
foundation: size, radius, motion, interaction, typography
states: ["hover", "active", "focus", "disabled", "loading"]
island: icon_button_boundary.rs
pillar: action
badges: ["SSR Safe", "Hydration Safe", "Token Driven", "Deterministic API", "Zero Drift", "Island Architecture"]
before: |
// ❌ Typical
view! {
<button><svg /></button>
}
after: |
// ✅ CanonRS
view! {
<IconButton aria_label="Close">"×"</IconButton>
}
boundary_type: init
block: []
blocks_primitives: [stack, grid]