Button · juxt.ui

Installation #

With the Nuxt module, every component is auto-imported — there is nothing to add. In a plain Vue project, import what you use:

import { JButton } from '@juxtui/ui'

Usage #

<JButton>Save changes</JButton>
<JButton variant="ghost">Cancel</JButton>

Primary is ink, not green. Green in juxt.ui signals state — focus, selection, success — so a primary button stays in the neutral palette and the accent keeps its meaning.

Use one primary action per view. Pair it with ghost or outline for secondary actions.

Variants & examples #

Sizes#

Four sizes on a 4px grid. md is the default and matches form controls.

<template>
  <JButton size="xs">Extra small</JButton>
  <JButton size="sm">Small</JButton>
  <JButton size="md">Medium</JButton>
  <JButton size="lg">Large</JButton>
</template>

With icons#

Use the leading and trailing slots. Icons are sized to the text automatically.

<script setup lang="ts">
import { ArrowRight, Download, Plus } from '@lucide/vue'
</script>

<template>
  <JButton>
    <template #leading><Plus /></template>
    New project
  </JButton>
  <JButton variant="outline">
    <template #leading><Download /></template>
    Download
  </JButton>
  <JButton variant="ghost">
    Continue
    <template #trailing><ArrowRight /></template>
  </JButton>
</template>

Loading#

The label cross-fades to a spinner without changing width. The button stays focusable and announces itself as busy.

<script setup lang="ts">
const saving = ref(false)

async function save() {
  saving.value = true
  await new Promise(resolve => setTimeout(resolve, 1600))
  saving.value = false
  toast.success('Changes saved')
}
</script>

<template>
  <JButton :loading="saving" @click="save">Save changes</JButton>
  <JButton variant="outline" loading>Publishing</JButton>
  <JButton variant="secondary" size="sm" loading>Syncing</JButton>
</template>

Icon only#

Square buttons for toolbars. Always give them an aria-label — a tooltip helps sighted users too.

<script setup lang="ts">
import { Copy, Ellipsis, Pencil, Trash2 } from '@lucide/vue'
</script>

<template>
  <JButton variant="outline" icon aria-label="Edit"><Pencil /></JButton>
  <JButton variant="ghost" icon aria-label="Duplicate"><Copy /></JButton>
  <JButton variant="ghost" icon aria-label="More actions"><Ellipsis /></JButton>
  <JButton variant="destructive" icon aria-label="Delete"><Trash2 /></JButton>
</template>

Disabled#

<template>
  <JButton disabled>Save changes</JButton>
  <JButton variant="outline" disabled>Export</JButton>
  <JButton variant="ghost" disabled>Cancel</JButton>
</template>

API #

Props

Prop	Type	Default	Description
variant	`'primary' \| 'secondary' \| 'outline' \| 'ghost' \| 'destructive'`	`'primary'`	Visual weight of the action.
size	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Height and type size.
loading	`boolean`	`false`	Shows a spinner, keeps the width and blocks activation. The button remains focusable.
disabled	`boolean`	`false`	Natively disables the button.
icon	`boolean`	`false`	Square button for a single icon.
block	`boolean`	`false`	Stretch to the container width.
as	`string \| Component`	`'button'`	Render as another element or component, e.g. `a` or `NuxtLink`.
type	`'button' \| 'submit' \| 'reset'`	`'button'`	Native button type. Defaults to `button` so it never submits a form by accident.

Events

Event	Payload	Description
click	`MouseEvent`	Native click. Suppressed while `loading` or `disabled`.

Slots

Slot	Props	Description
default	—	The label.
leading	—	Icon before the label.
trailing	—	Icon after the label.

Accessibility #

Renders a native <button type="button"> by default, so it works with every assistive technology and inside forms.
While loading, the button sets aria-busy="true" and aria-disabled="true" instead of disabled, so keyboard focus is not lost mid-action.
Icon-only buttons must receive an aria-label.
When rendered as a link and disabled, it is removed from the tab order and marked aria-disabled.

Keyboard #

Key	Action
`Enter`	Activates the button.
`Space`	Activates the button.