Vibes logo

Button

Installation

Run the following command

npx vibes@latest add button

Usage

import { Button } from '@/vibes/soul/primitives/button';function Usage() {  return (      <Button shape={'pill'} size={'large'} variant={'primary'}>          Show now      </Button>  );}

API Reference

ButtonProps

PropTypeDefault
children*
ReactNode
className
string
variant
'primary' | 'secondary' | 'tertiary' | 'ghost' | 'danger'
'primary'
size
'large' | 'medium' | 'small' | 'x-small'
'large'
shape
'pill' | 'rounded' | 'square' | 'circle'
'pill'
loading
boolean
false
srOnlyText
string
''

CSS Variables

This component supports various CSS variables for theming. Here's a comprehensive list.

:root {  --button-focus: var(--primary);  --button-font-family: var(--font-family-body);  --button-primary-background: var(--primary);  --button-primary-background-hover: var(--primary-highlight);  --button-primary-text: var(--foreground);  --button-primary-border: var(--primary);  --button-secondary-background: var(--foreground);  --button-secondary-background-hover: var(--background);  --button-secondary-text: var(--background);  --button-secondary-border: var(--foreground);  --button-tertiary-background: var(--background);  --button-tertiary-background-hover: var(--contrast-100);  --button-tertiary-text: var(--foreground);  --button-tertiary-border: var(--contrast-200);  --button-ghost-background: transparent;  --button-ghost-background-hover: color-mix(in oklab, var(--foreground) 5%, transparent);  --button-ghost-text: var(--foreground);  --button-ghost-border: transparent;  --button-loader-icon: var(--foreground);  --button-danger-background: color-mix(in oklab, var(--error), white 30%);  --button-danger-background-hover: var(--error-highlight);  --button-danger-text: var(--foreground);  --button-danger-border: color-mix(in oklab, var(--error), white 30%);}

Changelog

2025-05-20

  • Removed loading prop from disabled state
  • Added correct disabled Tailwind classes