PxButton

A flexible button primitive with five variants, three sizes, left/right icon slots, and a built-in loading state. Used as the base action element across the library.

Variants

Variants

<script setup>
import { PxButton } from 'praxis-vue-ui'
</script>

<template>
  <PxButton label="Primary" variant="primary" />
  <PxButton label="Secondary" variant="secondary" />
  <PxButton label="Danger" variant="danger" />
  <PxButton label="Ghost" variant="ghost" />
  <PxButton label="Link" variant="link" />
</template>

Sizes, Icons & States

Sizes, Icons & States

<script setup>
import { Download, ArrowRight } from '@lucide/vue'
import { PxButton } from 'praxis-vue-ui'
</script>

<template>
  <PxButton label="Small" size="sm" />
  <PxButton label="Medium" size="md" />
  <PxButton label="Large" size="lg" />
  <PxButton label="Download" :icon-left="Download" />
  <PxButton label="Next" :icon-right="ArrowRight" variant="secondary" />
  <PxButton label="Loading" loading />
  <PxButton label="Disabled" disabled />
</template>

API Reference

Prop	Type	Default	Description
label	string	—	—
size	"sm" | "md" | "lg"	'md'	—
variant	"primary" | "secondary" | "danger" | "ghost" | "link"	'primary'	—
loading	boolean	false	—
disabled	boolean	false	—
iconLeft	Component	—	—
iconRight	Component	—	—
type	"button" | "submit" | "reset"	'button'	—
block	boolean	false	—