Raya Button

The ultimate button component. Inspired by Nuxt UI, built for Vue, with built-in loading states and fluid animations.

Installation

npx raya-ui@latest add raya-button

File Structure

your-project

components

RayaButton.vue

API Reference

RayaButton

color

enum

"primary"

The semantic color palette of the button. Accepts primary, secondary, neutral, success, info, warning, or error.

variant

enum

"solid"

The visual style of the button. Accepts solid, outline, soft, subtle, ghost, or link.

Settings

Color

Variant

Size

Loading State

Disabled State

source-code.vue

<script setup lang="ts">
import { RayaButton } from '@/components/ui/raya-button'
</script>

<template>
  <RayaButton
    variant="solid"
  >
    Raya Button
  </RayaButton>
</template>