Button

Installation

pnpm dlx shadcn@latest add @spaceui/primitives-button

Usage

import { Button } from '@/components/ui/button'

<Button>Button</Button>

Link

You can use the render prop to render another element (like Next.js Link or React Router) with button styles.

import Link from 'next/link'
import { Button } from '@/components/ui/button'

export function LinkAsButton() {
  return <Button render={<Link href="/login" />}>Login</Button>
}

Features

Variants

Sizes

Standard sizing options: xs, sm, default, lg, xl.

Icon Sizes

Square button sizes designed specifically for single icons: icon-xs, icon-sm, icon, icon-lg, icon-xl.

Loading State

Support for native loading spinners via the loading prop.

Disabled

Button rendered in a disabled state via the disabled prop.

With Icon

Link as Button

API Reference

Button Props

When loading is true, the component:

• Renders a spinner (data-slot="button-loading-indicator")
• Adds data-loading on the button root
• Disables interaction and sets aria-disabled="true"
• Preserves button layout without jumping

Examples