Button

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

Import

import '@kittl/ui';

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

Usage

<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>

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

/** Basic Button usage, rendered live on the docs site. */
export const ButtonUsage = () => (
  <>
    <Button variant="primary" size="m">
      Save
    </Button>
    <Button variant="secondary">Cancel</Button>
    <Button variant="ghost" size="s">
      More
    </Button>
    <Button disabled>Disabled</Button>
  </>
);

Props

Property	Attribute	Type	Default	Description
size	size	'xs' | 's' | 'm' | 'l'	'm'	Button size
variant	variant	'ghost' | 'secondary' | 'primary'	'primary'	Visual style
type	type	'button' | 'submit' | 'reset'	'button'	HTML button type
disabled	disabled	boolean	—	Disable 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