Components / Button

Button

The primary interactive element. Supports variants and semantic intent colors.

Variants

primary, secondary, ghost — the shape of the interaction.

Intent — Primary

primary variant across all semantic meanings.

Intent — Secondary

secondary variant with semantic intent.

Intent — Ghost

ghost variant with semantic intent.

Sizes

sm, md, lg.

Disabled

Disabled state across variants.

With Icons

Buttons containing an icon alongside text.

Icon Only

A square button designed to perfectly center a single icon using the 'icon' size variant.

Split Button

Compose a MayaBtnGroup with a dropdown menu to offer secondary actions attached to the main button.

MayaBtn Props API

Prop / EventTypeDefaultDescription
variantString"primary"The visual style. Options: "primary", "secondary", "ghost", "outline".
sizeString"md"The sizing of the button. Options: "sm", "md", "lg", "icon".
intentString"default"The semantic color intent. Options: "default", "success", "warning", "danger", "info".
disabledBooleanfalseWhether the button is disabled and unclickable.
@clickEventEmitted when the button is clicked. Passes the native MouseEvent.
#defaultSlotThe default slot for the button content (text, icons).