Кнопка

В проекте используются несколько вариантов кнопок. Все они построены на CSS-переменных темы и поддерживают hover/active состояния с плавными переходами.

Варианты

Accent (основная)

<button class="bg-accent text-background h-9 px-4 rounded-sm font-medium text-sm
               transition-colors duration-150 hover:bg-accent/85 active:scale-[0.98]">
	Основная кнопка
</button>

<button class="bg-accent text-background h-9 px-4 rounded-sm font-medium text-sm
               transition-colors duration-150 hover:bg-accent/85 active:scale-[0.98]">
	Основная кнопка
</button>

Outline (контурная)

<button class="border border-border bg-transparent h-9 px-4 rounded-sm font-medium text-sm
               text-foreground hover:bg-background-muted">
	Контурная кнопка
</button>

<button class="border border-border bg-transparent h-9 px-4 rounded-sm font-medium text-sm
               text-foreground hover:bg-background-muted">
	Контурная кнопка
</button>

Ghost (призрачная)

<button class="bg-transparent h-9 px-4 rounded-sm font-medium text-sm
               text-foreground-muted hover:text-foreground hover:bg-background-muted">
	Призрачная кнопка
</button>

<button class="bg-transparent h-9 px-4 rounded-sm font-medium text-sm
               text-foreground-muted hover:text-foreground hover:bg-background-muted">
	Призрачная кнопка
</button>

Danger (опасное действие)

<button class="bg-red-500/10 text-red-500 h-9 px-4 rounded-sm font-medium text-sm
               hover:bg-red-500/20">
	Удалить
</button>

<button class="bg-red-500/10 text-red-500 h-9 px-4 rounded-sm font-medium text-sm
               hover:bg-red-500/20">
	Удалить
</button>

Размеры

Размер	Высота	Шрифт	Паддинг
Small	`h-7`	`text-xs`	`px-2.5`
Default	`h-9`	`text-sm`	`px-4`
Large	`h-11`	`text-base`	`px-6`

Маленькая

<button class="h-7 px-2.5 text-xs bg-accent text-background rounded-sm font-medium">
	Маленькая
</button>

<button class="h-7 px-2.5 text-xs bg-accent text-background rounded-sm font-medium">
	Маленькая
</button>

С иконкой

<button class="gap-2">
	<SomeIcon size={16} />
	Добавить
</button>

<button class="gap-2">
	<SomeIcon size={16} />
	Добавить
</button>

Кнопка-ссылка

<a
	href="/docs"
	class="inline-flex h-9 items-center gap-2 rounded-sm bg-background-inset px-4
	       text-sm font-medium text-foreground hover:bg-background-muted"
>
	Перейти в документацию
</a>

<a
	href="/docs"
	class="inline-flex h-9 items-center gap-2 rounded-sm bg-background-inset px-4
	       text-sm font-medium text-foreground hover:bg-background-muted"
>
	Перейти в документацию
</a>

Состояния

:hover — плавное изменение фона / цвета
:active — scale(0.98) для тактильного отклика
:focus-visible — ring для навигации с клавиатуры
:disabled — opacity-50 cursor-not-allowed