Components/Actions/Button
COMPONENT01.01

Button

Clickable action in plain <button> elements. Variants map to classes and data-variant attributes.

INSTALL

1pnpm dlx @sayagodev/mo add button

Or copy the files manually and import them:

1import "@sayagodev/mo/css/button.css";2import "@sayagodev/mo/css/shared.css";

EXAMPLES

Variants
Link
Default
Secondary
Outline
Ghost
Destructive
Link
With icon
Icon only
Sizes
Icon sizes
Rounded
Group + popover
Start a new task with Copilot

Describe your task in natural language.

Copilot will open a pull request for review.

Group with select
As child
Spinner
Disabled
Demo

API

NAMETYPEDEFAULTDESCRIPTION
class"outline" | "ghost" | "link" | "small" | "large"—Visual style / size of the button.
data-variant"destructive"—Semantic variant (destructive actions).
disabledbooleanfalseDisables the button.
type"button" | "submit" | "reset""submit"Native button type.
command"show-modal" | "close" | …—Declarative Command API action.
commandforstring (element id)—Target element of the command.

All other native <button> attributes are supported.

THEMING · PLAYGROUND

Button reads global tokens plus its own --mo-button-* hooks. Edit either altitude in the editor — autocomplete knows every hook — and the preview obeys in real time.

Tokens & hooks — edit live
Global tokens
--accent--accent-foreground--background--border--destructive--foreground--input--muted--muted-foreground--primary--primary-foreground--radius--ring--secondary--secondary-foreground
Component hooks
--mo-button-font-size--mo-button-height--mo-button-height-large--mo-button-height-small--mo-button-height-xs--mo-button-padding-x--mo-button-padding-x-large--mo-button-padding-x-small--mo-button-padding-x-xs--mo-button-padding-y--mo-button-radius

Preview

Your CSS

Try it: type --mo- for the component hooks, or edit any value — the preview obeys in real time.