Button¶
Кнопки с различными вариантами стилей и состояний.
Демонстрация¶
Использование¶
import { Button } from "@viai/kit"
// Варианты стилей
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>
// Размеры
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
// Состояния
<Button isLoading>Загрузка...</Button>
<Button disabled>Отключено</Button>
Props¶
| Prop | Тип | По умолчанию | Описание |
|---|---|---|---|
variant |
"primary" \| "secondary" \| "outline" \| "ghost" \| "danger" |
"primary" |
Вариант стиля |
size |
"sm" \| "md" \| "lg" |
"md" |
Размер кнопки |
isLoading |
boolean |
false |
Состояние загрузки |
disabled |
boolean |
false |
Отключённое состояние |
Примеры¶
Кнопка с иконкой¶
import { Button } from "@viai/kit"
import { Send } from "lucide-react"
<Button>
<Send className="w-4 h-4 mr-2" />
Отправить
</Button>