Button
`<pura-button>` is a native web component that renders a styled button for form and UI actions. It offers visual variants (primary, secondary, ghost, danger), sizes, and disabled and loading states. Use it whenever you need a consistent action trigger, with clicks automatically blocked while disabled or loading.
Preview
<div style="display:flex; gap:.75rem; flex-wrap:wrap; align-items:center">
<pura-button>Save</pura-button>
<pura-button variant="secondary">Cancel</pura-button>
<pura-button variant="ghost">Details</pura-button>
<pura-button variant="danger">Delete</pura-button>
<pura-button loading>Sending</pura-button>
<pura-button disabled>Unavailable</pura-button>
<pura-button size="sm">Small</pura-button>
<pura-button size="lg">Large</pura-button>
</div>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "secondary" | "ghost" | "danger" | primary | Visual style of the button. |
size | "sm" | "md" | "lg" | md | Size of the button. |
disabled | boolean | false | Disables the button and blocks clicks. |
loading | boolean | false | Shows the spinner, sets aria-busy, and blocks clicks. |
full | boolean | false | Makes the button span the full available width. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/button.js"></script>import "./pura/lib/button.js";