Raya Button

The ultimate button component. Inspired by Nuxt UI, built for Vue.

Variants (Primary)

Semantic Colors

Soft Variants

Sizes & States

Installation

npx shadcn-vue@latest add https://raya-ui.com/registry/registry/raya-button.json

Note: You must also update your main.css (see the CSS tab) for colors to work.

1. Install dependencies:

npm install class-variance-authority reka-ui lucide-vue-next

2. Copy the component code into components/ui/raya-button.

Update main.css

Add these variables to your assets/css/main.css file. This is required for the semantic colors (success, warning, info) and utility classes.

:root {
    /* Feedback Colors */
    --success: oklch(0.62 0.19 145.4);
    --success-foreground: oklch(0.98 0 0);

    --warning: oklch(0.75 0.15 70);
    --warning-foreground: oklch(0.98 0 0);

    --info: oklch(0.60 0.16 255);
    --info-foreground: oklch(0.98 0 0);

    /* Map Error to Destructive */
    --error: var(--destructive);
    --error-foreground: var(--destructive-foreground);
}

.dark {
    --success: oklch(0.55 0.18 145.4);
    --success-foreground: oklch(1 0 0);

    --warning: oklch(0.70 0.15 70);
    --warning-foreground: oklch(0.1 0 0);

    --info: oklch(0.55 0.16 255);
    --info-foreground: oklch(1 0 0);
}

@theme inline {
    /* Semantic Color Mapping */
    --color-success: var(--success);
    --color-success-content: var(--success-foreground);

    --color-warning: var(--warning);
    --color-warning-content: var(--warning-foreground);

    --color-info: var(--info);
    --color-info-content: var(--info-foreground);

    --color-error: var(--error);
    --color-error-content: var(--error-foreground);

    /* Utility Mappings used by Button */
    --color-primary-content: var(--primary-foreground);
    --color-secondary-content: var(--secondary-foreground);
    --color-inverted: var(--foreground);
    --color-default: var(--foreground);
    --color-elevated: var(--muted);
    --color-accented: var(--accent);
}

Props

Prop	Values	Default
color	primary \| secondary \| neutral \| success \| info \| warning \| error	primary
variant	solid \| outline \| soft \| subtle \| ghost \| link	solid
size	xs \| sm \| md \| lg \| xl	md
as	string \| Component	"button"
asChild	boolean	false