Button

An interactive button with multiple color variants, appearances, sizes, optional icons, and a loading state.

Playground

Button

primary

Button

secondary

Button

neutral

Button

success

Button

warning

Button

error

Button

info

Controls

Variant

Appearance

Bordered

Size

Disabled

Loading

Icon Start

Icon End

Full Width

Uppercase

Href

Target

Rel

Type

Name

Value

Form Action

Theme

HTMLReact

ShareCopy

Usage

<lt-button variant="primary">Save changes</lt-button>
<lt-button variant="primary" appearance="outlined" icon-start="download">Download</lt-button>
<lt-button variant="neutral" appearance="ghost">Cancel</lt-button>
<lt-button variant="error" icon-start="trash" loading>Deleting…</lt-button>

<!-- Toggle button — aria-pressed on the host is forwarded to the internal native button -->

<lt-button variant="neutral" icon-start="heart" aria-pressed="true">42</lt-button>

import { Button } from '@latty-ds/react';

<Button variant="primary">Save changes</Button>
<Button variant="primary" appearance="outlined" iconStart="download">
Download
</Button>
<Button variant="neutral" appearance="ghost">
Cancel
</Button>
<Button variant="error" iconStart="trash" loading>
Deleting…
</Button>

{/* Toggle button — aria-pressed on the host is forwarded to the internal native button */}

<Button variant="neutral" iconStart="heart" aria-pressed={liked}>{count}</Button>

<script setup lang="ts">
function save() { /* ... */ }
</script>

<template>
<lt-button variant="primary" @click="save">Save changes</lt-button>
<lt-button variant="primary" appearance="outlined" icon-start="download">Download</lt-button>
<lt-button variant="neutral" appearance="ghost">Cancel</lt-button>
<lt-button variant="error" icon-start="trash" loading>Deleting…</lt-button>

<!-- Toggle button — aria-pressed on the host is forwarded to the internal native button -->

<lt-button variant="neutral" icon-start="heart" :aria-pressed="String(liked)">{{ count }}</lt-button>

</template>

Form submission

lt-button is form-associated. Set type="submit" to submit the containing form (with constraint validation) or type="reset" to reset it.

<form id="demo-form" style="display:flex;gap:0.75rem;align-items:flex-end;">
<lt-textfield label="Email" type="email" required placeholder="you@example.com"></lt-textfield>
<lt-button type="submit" variant="primary">Subscribe</lt-button>
<lt-button type="reset" variant="neutral" appearance="outlined">Clear</lt-button>
</form>
<script type="module">
import '@latty-ds/web';
document.getElementById('demo-form').addEventListener('submit', (e) => {
  e.preventDefault();
  alert('Submitted!');
});
</script>

import { Button, Textfield } from '@latty-ds/react';

function NewsletterForm() {
function handleSubmit(e) {
e.preventDefault();
alert('Submitted!');
}
return (

<form onSubmit={handleSubmit} style={{ display: 'flex', gap: '0.75rem', alignItems: 'flex-end' }}>
<Textfield label="Email" type="email" required placeholder="you@example.com" />
<Button type="submit" variant="primary">Subscribe</Button>
<Button type="reset" variant="neutral" appearance="outlined">Clear</Button>
</form>
);
}

<template>
<form @submit.prevent="handleSubmit" style="display:flex;gap:0.75rem;align-items:flex-end;">
  <lt-textfield label="Email" type="email" required placeholder="you@example.com"></lt-textfield>
  <lt-button type="submit" variant="primary">Subscribe</lt-button>
  <lt-button type="reset" variant="neutral" appearance="outlined">Clear</lt-button>
</form>
</template>

API