id: button
label: Button
family: family-c-forms
category: Action
intent: Trigger an action or event
description: Action button with variant and size
composable: false
capabilities: Disabled
required_parts: []
optional_parts: []
tags: ["button", "action", "submit", "click", "cta"]
keywords: button rust leptos, ssr safe button leptos, canonical button component rust, governed ui button
pain: Buttons rely on string classes causing inconsistent variants and states
promise: Variant and size enforced at compile-time via enums
why: |
ButtonVariant and ButtonSize define allowed visual and behavioral states. The primitive encodes these into data attributes, ensuring consistent rendering. This eliminates invalid combinations and style drift.
rules: ["CR-001", "CR-004", "CR-148"]
use_cases: ["form submit", "cta actions"]
related: ["button_group", "icon_button", "copy_button", "link"]
file: button_ui.css
tokens: button-*, space-*, radius-*, motion-*, size-*, font-*, line-height-*, state-*, focus-ring-*, validation-*, filter-*
foundation: spacing, radius, motion, interaction, typography
states: ["hover", "active", "focus", "disabled"]
island: button_boundary.rs
pillar: action
badges: ["SSR Safe", "Hydration Safe", "Token Driven", "Deterministic API", "Zero Drift", "Island Architecture"]
before: |
// ❌ Typical
view! {
<button class="btn btn-primary btn-md">"Submit"</button>
}
after: |
// ✅ CanonRS
view! {
<Button variant=ButtonVariant::Primary size=ButtonSize::Md>
"Submit"
</Button>
}
boundary_type: init
block: []
blocks_primitives: [stack]