Button

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Button
  label="Button"
  type="button"
  variant="primary"
  size="md"
  disabled="false"
/>

Legacy mount name: data-component="Button".

Props and attributes

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/Button.wrn

component Button {
  props {
    label = "Button"
    type = "button"
    variant = "primary"
    size = "md"
    disabled = false
    loading = false
    icon = ""
    className = ""
  }
  view {
        <button type="{type}" disabled="{disabled || loading}" aria-busy="{loading}" class="inline-flex min-h-11 items-center justify-center gap-2 rounded-xl font-semibold transition-all duration-200 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 active:scale-[0.98] {size === 'sm' ? 'px-3 py-2 text-sm' : size === 'lg' ? 'px-6 py-3.5 text-base' : 'px-4 py-2.5 text-sm'} {variant === 'secondary' ? 'border border-slate-300 bg-white text-slate-900 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-900 dark:text-white dark:hover:bg-slate-800' : variant === 'ghost' ? 'text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800' : variant === 'danger' ? 'bg-red-600 text-white hover:bg-red-700' : 'bg-violet-600 text-white shadow-sm hover:-translate-y-0.5 hover:bg-violet-700 hover:shadow-md'} {className}">
        <span data-show="loading" class="size-4 animate-spin rounded-full border-2 border-current border-r-transparent">
        </span>
        <span>{label}</span>
        </button>
    }
}