# Button > Native ``` Native buttons with the optional stylesheet. Works with JavaScript disabled. ## Examples ### Looks ```svelte {#each variants as variant}

{#each colors as color} {/each}

{/each} ``` The variant is the fill only (contained is the default); the color is its own attribute, on the button or an ancestor. ### Sizes ```svelte ``` ### With an icon ```svelte ``` The start-icon and end-icon parts are sized and spaced by the stylesheet; an icon-only button needs aria-label. ### Full width ```svelte ``` ### Loading ```svelte ``` The ring turns while the request runs; focus stays on the button. ### Icon buttons with hints ```svelte ``` Hover or focus a button to see its hint. ### Disabled and unavailable ```svelte ``` Tab through: only the aria-disabled button takes focus. ### As a link ```svelte Get started Browse primitives ``` Navigation stays a link; the stylesheet gives it the button's look. ## Usage Plain markup with a stylesheet: install `@svelte-lean/styles`. No JavaScript runs. ```bash npm install @svelte-lean/styles ``` `stylesheets` ```ts import '@svelte-lean/styles/button.css'; ``` Use a button for an action on the current page: submit, open, toggle, delete. Use an `` for navigation and give it `data-slean="button"` when it should look like one. Inside a `

` the default type is `submit`; write `type="button"` for anything that does not submit. While an action runs, set `aria-busy="true"` rather than `disabled`, so focus stays put. ## Anatomy | Part | Element | data-slean-part | Required | Notes | | --- | --- | --- | --- | --- | | root | ` ``` ## Under the hood Runtime and size - **Tier**: 0 · Native - **Behavior JS**: 0 B brotli · 0 B gzip · `fixtures/results.json (native-only)` · [method](https://svelte-lean.vercel.app/performance/methodology.md) - **Platform features**: `