Getting Started
Usage
Learn how to use YaVendio components in your React applications
Once you've installed a component, import and use it in your React components.
Basic Usage
import { YaButton } from '@/components/ui/ya-button'
export default function MyComponent() {
return (
<YaButton variant="primary">
Click me
</YaButton>
)
}Component Props
All components are fully typed with TypeScript:
import { YaButton } from '@/components/ui/ya-button'
export default function MyComponent() {
return (
<YaButton
variant="primary" // "primary" | "secondary" | "tertiary"
size="default" // "default" | "small"
buttonType="button" // "button" | "icon" | "text" | "text-square"
disabled={false}
onClick={() => console.log('Clicked!')}
>
Submit
</YaButton>
)
}Button Variants
<YaButton variant="primary">
Primary Action
</YaButton><YaButton variant="secondary">
Secondary Action
</YaButton><YaButton variant="tertiary">
Tertiary Action
</YaButton>Buttons with Icons
Use leftIcon and rightIcon props:
import { YaButton } from '@/components/ui/ya-button'
import { Search, ArrowRight } from 'lucide-react'
export default function MyComponent() {
return (
<div className="flex gap-4">
<YaButton variant="primary" leftIcon={<Search />}>
Search
</YaButton>
<YaButton variant="primary" rightIcon={<ArrowRight />}>
Continue
</YaButton>
</div>
)
}Icon-Only Buttons
import { YaButton } from '@/components/ui/ya-button'
import { Search } from 'lucide-react'
<YaButton variant="primary" buttonType="icon">
<Search />
</YaButton>Loading States
import { YaButton } from '@/components/ui/ya-button'
import { useState } from 'react'
export default function MyComponent() {
const [isLoading, setIsLoading] = useState(false)
const handleSubmit = async () => {
setIsLoading(true)
try {
await fetch('/api/submit')
} finally {
setIsLoading(false)
}
}
return (
<YaButton
variant="primary"
disabled={isLoading}
onClick={handleSubmit}
>
{isLoading ? 'Loading...' : 'Submit'}
</YaButton>
)
}Using as Child
Use asChild to render as a different element:
import { YaButton } from '@/components/ui/ya-button'
import Link from 'next/link'
<YaButton variant="primary" asChild>
<Link href="/dashboard">
Go to Dashboard
</Link>
</YaButton>Composition
Components work well together:
import { YaButton } from '@/components/ui/ya-button'
export default function ActionBar() {
return (
<div className="flex gap-2">
<YaButton variant="primary" size="small">Save</YaButton>
<YaButton variant="secondary" size="small">Cancel</YaButton>
<YaButton variant="tertiary" size="small">Reset</YaButton>
</div>
)
}Customization
Custom Classes
<YaButton variant="primary" className="w-full rounded-full">
Custom Button
</YaButton>Custom Colors
Override shadcn variables for specific instances:
<YaButton
variant="primary"
style={{
'--primary': '#ff0000',
'--primary-foreground': '#ffffff',
} as React.CSSProperties}
>
Red Button
</YaButton>
{/* Or use YA brand primitives */}
<YaButton
variant="primary"
className="bg-[var(--ya-indigo-400)]"
>
Indigo Button
</YaButton>Accessibility
All components follow accessibility best practices:
<YaButton
variant="primary"
aria-label="Submit form"
type="submit"
>
Submit
</YaButton>Keyboard Navigation:
- Enter/Space — Activate button
- Tab — Focus next element
- Shift + Tab — Focus previous element
Form Integration
export default function LoginForm() {
return (
<form onSubmit={(e) => {
e.preventDefault()
// Handle submission
}}>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<div className="flex gap-2">
<YaButton type="submit" variant="primary">Log In</YaButton>
<YaButton type="button" variant="secondary">Cancel</YaButton>
</div>
</form>
)
}Dark Mode
Components automatically adapt to dark mode:
<div className="dark">
<YaButton variant="primary">
Dark Mode Button
</YaButton>
</div>Components detect the dark class on parent elements and apply appropriate styles automatically.