Обзор

AI-компоненты

Хуки

Ресурсы

llms.txt

Button

Кнопка или компонент, который выглядит как кнопка.

Установка


pnpm dlx shadcn@latest add @oracul/button

Использование

import { Button } from "@/components/ui/button"

<Button>Button</Button>

Ссылка

Вы можете использовать свойство render, чтобы заставить другой компонент выглядеть как кнопка. Вот пример ссылки, которая выглядит как кнопка.

import Link from "next/link"
 
import { Button } from "@/components/ui/button"
 
export function LinkAsButton() {
  return <Button render={<Link href="/login" />}>Login</Button>
}

Справочник API

Это пользовательский компонент, использующий хук useRender из Base UI, а не прямую обёртку Base UI.

Button

Компонент кнопки с поддержкой вариантов, размеров и состояний загрузки.

Свойство	Тип	По умолчанию	Описание
`variant`	`"default" \| "destructive" \| "destructive-outline" \| "ghost" \| "link" \| "outline" \| "secondary"`	`"default"`	Управляет стилизацией кнопки
`size`	`"default" \| "icon" \| "icon-lg" \| "icon-sm" \| "icon-xl" \| "icon-xs" \| "lg" \| "sm" \| "xl" \| "xs"`	`"default"`	Управляет размером кнопки
`loading`	`boolean`	`false`	Показывает спиннер и принудительно делает кнопку неактивной во время загрузки
`render`	`React.ReactElement`	-	Рендерит как другой элемент (например, Link)

Когда loading равно true, компонент:

Отрисовывает спиннер (data-slot="button-loading-indicator")
Добавляет data-loading на корневой элемент кнопки
Принудительно устанавливает нативный атрибут disabled
Устанавливает aria-disabled="true"
Сохраняет ширину кнопки, визуально скрывая содержимое вместо его размонтирования

Примеры

Иконка

import { IconPlus } from "@tabler/icons-react";
import { Button } from "@/components/ui/button";

export default function Particle() {
  return (
    <Button aria-label="Добавить" size="icon">
      <IconPlus aria-hidden="true" stroke={1.5} />
    </Button>
  );
}

Иконка маленького размера

import { IconPlus } from "@tabler/icons-react";
import { Button } from "@/components/ui/button";

export default function Particle() {
  return (
    <Button aria-label="Добавить" size="icon-sm">
      <IconPlus aria-hidden="true" stroke={1.5} />
    </Button>
  );
}

Иконка большого размера

import { IconPlus } from "@tabler/icons-react";
import { Button } from "@/components/ui/button";

export default function Particle() {
  return (
    <Button aria-label="Добавить" size="icon-lg">
      <IconPlus aria-hidden="true" stroke={1.5} />
    </Button>
  );
}

С иконкой

import { IconDownload } from "@tabler/icons-react";
import { Button } from "@/components/ui/button";

export default function Particle() {
  return (
    <Button>
      <IconDownload aria-hidden="true" stroke={1.5} />
      Скачать
    </Button>
  );
}

Загрузка (встроенное свойство)

"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";

export default function Particle() {
  const [isLoading, setIsLoading] = useState(false);

  const handleClick = () => {
    setIsLoading(true);

    window.setTimeout(() => {
      setIsLoading(false);
    }, 1000);
  };

  return (
    <Button loading={isLoading} onClick={handleClick}>
      Отправить
    </Button>
  );
}

Загрузка (пользовательская композиция)

import { Button } from "@/components/ui/button";
import { Spinner } from "@/components/ui/spinner";

export default function Particle() {
  return (
    <Button disabled>
      <Spinner />
      Загрузка...
    </Button>
  );
}

Единая кнопка «Назад» с иконкой — отдельный компонент @oracul/back-button, используется в деталках каталога, на правовых страницах и экране авторизации. Цвет — токен text-foreground (читается в обеих темах), на ховере слегка притухает. Текст можно заменить через children.


pnpm dlx shadcn@latest add @oracul/back-button

Button

Установка

Использование

Ссылка

Справочник API

Button

Примеры

По умолчанию

Контурная

Вторичная

Деструктивная

Деструктивная контурная

Призрачная

Ссылка

Очень маленький размер

Маленький размер

Большой размер

Очень большой размер

Неактивная

Иконка

Иконка маленького размера

Иконка большого размера

С иконкой

Со ссылкой

Загрузка (встроенное свойство)

Загрузка (пользовательская композиция)

Кнопка «Назад»