Button
The <ac-button> component renders either a <button> or <a> element depending on whether href is set.
Variants
Section titled “Variants” primary · secondary · ghost · outline · link · danger
<ac-button variant="primary">Primary</ac-button>
<ac-button variant="secondary">Secondary</ac-button>
<ac-button variant="ghost">Ghost</ac-button>
<ac-button variant="outline">Outline</ac-button>
<ac-button variant="link">Link</ac-button>
<ac-button variant="danger">Danger</ac-button> xs · sm · md · lg
<ac-button variant="primary" size="xs">Extra Small</ac-button>
<ac-button variant="primary" size="sm">Small</ac-button>
<ac-button variant="primary" size="md">Medium</ac-button>
<ac-button variant="primary" size="lg">Large</ac-button>States
Section titled “States” disabled · loading
<ac-button variant="primary" disabled>Disabled</ac-button>
<ac-button variant="secondary" disabled>Disabled</ac-button>
<ac-button variant="primary" loading>Loading...</ac-button>Icon-only
Section titled “Icon-only” icon-only buttons
<ac-button variant="secondary" class="ac-button--icon" size="sm" aria-label="Settings">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/></svg>
</ac-button>
<ac-button variant="primary" class="ac-button--icon" aria-label="Add">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
</ac-button>
<ac-button variant="ghost" class="ac-button--icon" aria-label="Delete">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6M14 11v6"/></svg>
</ac-button>As link
Section titled “As link”<ac-button href="/getting-started/overview/" variant="primary">Go to Docs</ac-button>
<ac-button href="https://acopl.ar" variant="ghost" target="_blank" rel="noopener">External ↗</ac-button>CSS usage (no Web Component)
Section titled “CSS usage (no Web Component)”<button class="ac-button ac-button--primary ac-button--md">Click me</button><a href="#" class="ac-button ac-button--secondary ac-button--sm">Link button</a>Attributes
Section titled “Attributes”| Attribute | Type | Default | Description |
|---|---|---|---|
variant | primary | secondary | ghost | outline | link | danger | primary | Visual style |
size | xs | sm | md | lg | md | Button size |
href | string | — | Renders an <a> element |
type | button | submit | reset | button | Native button type |
disabled | boolean | false | Disables the button |
loading | boolean | false | Shows spinner, sets aria-busy |
target | string | — | Link target (requires href) |
rel | string | — | Link rel (requires href) |