Button

A versatile button component with multiple variants, sizes, and states.

Actionsinteractiveformnavigation

Workbench

Rendering Button…

Installation

Copy the source into your project with the CLI. It lands under @/components/ui and is yours to edit.

npx mlola-ui add button

Usage

TSX

import { Button } from "@/components/ui/button";

export default function Example() {
  return (
    <div className="ml-cluster">
      <Button>Save changes</Button>
      <Button variant="secondary">Cancel</Button>
      <Button variant="danger" size="sm">Delete</Button>
    </div>
  );
}

Styling comes from the engine stylesheet and the nearest theme. Set it once at the root:

HTML

<html data-theme="graphite" data-mode="light">

Examples

With icons

An icon leads or trails the label. An icon-only button always carries a name.

Rendering With icons…

While it works

A busy button keeps its color, shows a spinner and says what it is doing; a second press does nothing.

Rendering While it works…

As a toggle

aria-pressed turns a subtle button into an on and off switch, drawn filled while on.

Rendering As a toggle…

HTML

The markup the example above renders, exactly. It needs no script: write it from any language or template.

HTML

<div class="ml-cluster">
  <button class="ml-button" type="button" data-variant="primary" data-size="md"><span class="ml-button-label">Save changes</span></button>
  <button class="ml-button" type="button" data-variant="secondary" data-size="md"><span class="ml-button-label">Cancel</span></button>
  <button class="ml-button" type="button" data-variant="danger" data-size="sm"><span class="ml-button-label">Delete</span></button>
</div>

Options

Prop	Values	Default	Description
`size`	`smmdlgicon`	`md`	—
`variant`	`primarysecondarysubtledangeroutlinelink`	`primary`	—
`width`	`autofull`	`auto`	"full" fills the container's width, as on a phone form; "auto" (the default) fits the label.

Every prop with a fixed set of values, read from the exported TypeScript types with its doc comment. Open the Code tab above for the rest of the API.

Classes and attributes

A class names each element; data-* and aria-* attributes carry its variant and state. The values listed are the ones the stylesheet draws; the default needs no attribute.

Class	Attributes
`ml-button`	`aria-disabled="true"data-loadingdata-size="icon \| lg \| sm"data-state="success"data-variant="danger \| link \| outline \| primary \| secondary \| subtle"data-width="full"`
`ml-button-label`	—
`ml-kbd`	—

Accessibility and theming

Semantic elements, accessible names and state relationships are part of the contract.
Keyboard, pointer and touch paths are operable; focus stays visible in every theme.
Light and dark modes pass WCAG AA contrast in all 5 canonical themes.
Reduced motion and forced colors keep meaning and operation.

Dependencies

Installed alongside this component. No third-party UI runtime is ever added.

spinner
@mlola-ui/motion

Open the standalone preview