Skip to main content

Button

Primary action trigger. Supports multiple sizes and variants, and integrates with HTML forms.

Preview
Loading preview…

Import​

// Web Component
import '@kittl/ui';

// React
import { Button } from '@kittl/ui-react';

Usage​

Web Component​

<kittl-button variant="primary" size="m">Save</kittl-button>
<kittl-button variant="secondary">Cancel</kittl-button>
<kittl-button variant="ghost" size="s">More</kittl-button>
<kittl-button disabled>Disabled</kittl-button>

React​

<Button variant="primary" size="m">Save</Button>
<Button variant="secondary">Cancel</Button>
<Button variant="ghost" size="s">More</Button>
<Button disabled>Disabled</Button>

Props​

PropertyTypeDefaultDescription
variant'primary' | 'secondary' | 'ghost''primary'Visual style
size'xs' | 's' | 'm' | 'l''m'Button size
type'button' | 'submit' | 'reset''button'HTML button type
disabledbooleanfalseDisable the button

Form Integration​

Button is form-associated. When type="submit" or type="reset", it automatically submits or resets its parent form.

Accessibility​

  • role="button" set via ElementInternals
  • Keyboard: Space and Enter trigger click
  • Disabled state prevents interaction