@usevyre/react@usevyre/vue

Button

Triggers actions and navigation. Supports 6 variants, 4 sizes, loading state, icons, and polymorphic rendering via as.

Variants

import { Button } from "@usevyre/react";

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="accent">Accent</Button>
<Button variant="teal">Teal</Button>
<Button variant="danger">Danger</Button>

<script setup>
import { Button } from "@usevyre/vue";
</script>
<template>
  <Button variant="primary">Primary</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="ghost">Ghost</Button>
  <Button variant="accent">Accent</Button>
  <Button variant="teal">Teal</Button>
  <Button variant="danger">Danger</Button>
</template>

Sizes

<Button variant="accent" size="sm">Small</Button>
<Button variant="accent" size="md">Medium</Button>
<Button variant="accent" size="lg">Large</Button>

<Button variant="accent" size="sm">Small</Button>
<Button variant="accent" size="md">Medium</Button>
<Button variant="accent" size="lg">Large</Button>

States

<Button variant="accent">Default</Button>
<Button variant="accent" loading>Loading</Button>
<Button variant="accent" disabled>Disabled</Button>

<Button variant="accent">Default</Button>
<Button variant="accent" :loading="true">Loading</Button>
<Button variant="accent" :disabled="true">Disabled</Button>

Icons & polymorphic

Use leftIcon / rightIcon props in React, or named slots#left-icon / #right-icon in Vue. Pass as="a"to render as an anchor while keeping all button styles.

Read Docs

import { Button } from "@usevyre/react";
import { Search } from "lucide-react"; // any icon library

// Icon before label
<Button variant="secondary" leftIcon={<Search size={14} />}>
  Search
</Button>

// Icon only (use size="icon" + aria-label)
<Button variant="ghost" size="icon" aria-label="Search">
  <Search size={16} />
</Button>

// As anchor link
<Button as="a" href="/docs" variant="accent">
  Read Docs
</Button>

<script setup>
import { Button } from "@usevyre/vue";
</script>
<template>
  <!-- Icon before label -->
  <Button variant="secondary">
    <template #left-icon>
      <SearchIcon />
    </template>
    Search
  </Button>

  <!-- Icon only -->
  <Button variant="ghost" size="icon" aria-label="Search">
    <SearchIcon />
  </Button>

  <!-- As anchor -->
  <Button as="a" href="/docs" variant="accent">
    Read Docs
  </Button>
</template>

Props

Prop	Type	Default	Description
`variant`	`"primary" \| "secondary" \| "ghost" \| "accent" \| "teal" \| "danger"`	`"secondary"`	Visual style variant.
`size`	`"sm" \| "md" \| "lg" \| "icon"`	`"md"`	Size scale. Use icon for square icon-only buttons.
`loading`	`boolean`	`false`	Shows spinner and disables interaction.
`disabled`	`boolean`	`false`	Disables the button.
`as`	`ElementType / string`	`"button"`	Render as a different element. Use "a" for link buttons.
`leftIcon`	`ReactNode`	`—`	React only. Icon rendered before the label.
`rightIcon`	`ReactNode`	`—`	React only. Icon rendered after the label.
`className`	`string`	`—`	Additional CSS class names.

AI Context

Valid props

Prop	Values	Default
`variant`	`"primary"`\|`"secondary"`\|`"ghost"`\|`"accent"`\|`"teal"`\|`"danger"`	`secondary`
`size`	`"sm"`\|`"md"`\|`"lg"`\|`"icon"`	`md`
`loading`	`true`\|`false`	`false`
`disabled`	`true`\|`false`	`false`

Common AI mistakes

variant="blue"→ Use variant="accent" for brand amber, or variant="teal" for teal
size="xl"→ Use size="lg"
color="..."→ Use variant prop instead
icon={...}→ Use leftIcon={...} or rightIcon={...}
size="icon" without aria-label→ Add aria-label describing the action
padding / margin / marginTop (any spacing prop) on a useVyre component→ Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it

Quick examples

Primary CTA

<Button variant="primary">Get Started</Button>

Large accent button

<Button variant="accent" size="lg">Launch App</Button>

← Breadcrumb Calendar →