Button

Triggers an action. Variants set emphasis; size (xs, sm, md, lg, xl) sets density.

Import

Vue

import { UiButton } from '@ziyarago/ui/vue'

Variants

Vue

<UiButton variant="primary">
  Primary
</UiButton>

<UiButton variant="secondary">
  Secondary
</UiButton>

<UiButton variant="ghost">
  Ghost
</UiButton>

Sizes

Vue

<UiButton variant="primary" size="xs">
  XS
</UiButton>

<UiButton variant="primary" size="sm">
  SM
</UiButton>

<UiButton variant="primary" size="md">
  MD
</UiButton>

<UiButton variant="primary" size="lg">
  LG
</UiButton>

<UiButton variant="primary" size="xl">
  XL
</UiButton>

States

Vue

<UiButton variant="primary" disabled>
  Disabled
</UiButton>

<UiButton variant="primary" loading>
  Saving
</UiButton>

API reference

Primary action control with visual variants, tones, sizes, icons and a loading state.

Props

PropType and valuesDefaultDescription

variantprimarysecondaryghostdangerinversetonaloutlinedtextelevated'secondary'Visual emphasis. primary is the main call to action, danger is destructive, inverse is for dark surfaces.

tonebrandskysuccesswarningdangerneutral—Accent color applied to tonal, outlined, text and elevated variants.

sizexssmmdlgxl'md'Button height: xs 28px, sm 32px, md 40px, lg 48px, xl 56px.

iconstring—Icon shown before the label.

iconRightstring—Icon shown after the label.

loadingbooleanfalseShows a spinner instead of the icon and disables the button.

disabledbooleanfalseBlocks interaction and dims the button.

blockbooleanfalseStretches the button to the full width of its container.

typebuttonsubmitreset'button'Native button type. Use submit inside a form.

iconOnlybooleanfalseSquare button (width equals height) with no horizontal padding, for a lone icon. Pass an aria-label.

titlestring—Native tooltip text.

Slots

Vue: named slots. React: a prop with the same name; default is children.

defaultButton label.

Events

Vue: @name. React: onName.

clickNative click event. Not fired while disabled or loading.

Notes

Renders type="button" unless type is set, so it never submits a form by itself.