🔘 Кнопки Buttons

Варианты

Primary Secondary Tertiary Danger

<button class="to-button" data-variant="primary">Primary</button>

Размеры

Small Medium Large

<button class="to-button" data-size="s">Small</button>

Состояния

Disabled Full Width

<button class="to-button" disabled>Disabled</button>

🏷️ Бейджи Badges

Монохромные

Neutral

<span class="to-badge" data-variant="neutral">Neutral</span>

Цветные (акценты)

Success Warning Danger Info

<span class="to-badge" data-variant="success">Success</span>

⏳ Спиннеры Spinners

Размеры

<span class="to-spinner" data-size="m"></span>

Цветные

<span class="to-spinner" data-color="success"></span>

👤 Аватары Avatars

Размеры

JD

AB

CD

EF

GH

<div class="to-avatar" data-size="m" data-value="JD">JD</div>

Группа

A

B

C

D

Группа аватаров

🏷️ Теги Tags

Монохромные

Default Primary

<span class="to-tag">Default</span>

Цветные

Success Warning Danger

<span class="to-tag" data-variant="success">Success</span>

📦 Карточки Cards

Обычная

Заголовок

Содержимое карточки

Действие

<div class="to-card">...</div>

С тенью

Elevated

Карточка с тенью

Кнопка

<div class="to-card" data-variant="elevated">...</div>

📑 Аккордеон Accordion

Обычный

Нажмите чтобы раскрыть ▼

Скрытое содержимое аккордеона с матричной анимацией.

<div class="to-accordion">...</div>

Группа

Первый элемент ▼

Содержимое 1

Второй элемент ▼

Содержимое 2

Группа аккордеонов

⬇️ Дропдаун Dropdown

Выпадающее меню

Открыть меню ▼

Профиль

Настройки

Помощь

Выйти

<div class="to-dropdown">...</div>

💬 Тултип Tooltip

Подсказка

Наведи на меня Это тултип

<div class="to-tooltip">...</div>

Разные позиции

Top Сверху

Bottom Снизу

data-position="top/bottom"

📊 Прогресс Progress

Индикаторы

Прогресс 25%

Прогресс 50%

Прогресс 75%

<div class="to-progress" data-value="50">...</div>

📢 Баннеры Banners

Монохромный

Обычный баннер

<div class="to-banner">...</div>

Цветные

Успешный баннер

Предупреждение

Ошибка

data-variant="success/warning/danger"

📊 Таблицы Tables

Простая таблица

Имя	Возраст	Город
Иван	25	Москва
Мария	30	СПб
Петр	28	Казань

<table class="to-table">...</table>

⏱️ Таймлайн Timeline

События

Событие 1 - завершено

Событие 2 - активно

Событие 3 - ошибка

Событие 4 - ожидание

<div class="to-timeline">...</div>

⚡ Статусы Status Indicators

Индикаторы

Online Away Busy

<span class="to-status-indicator" data-color="success">Online</span>

🦴 Скелетон Skeleton

Загрузка

<div class="to-skeleton"></div>

🔗 Хлебные крошки Breadcrumbs

Навигация

Главная Категория Текущая

<div class="to-breadcrumbs">...</div>

🔲 Flex & Grid

Flex

1

2

3

<div class="to-flex" data-gap="m">...</div>

Grid

1

2

3

<div class="to-grid" data-columns="3">...</div>

✨ Иконки Icons

Примеры

❤️ ⭐ 🔥 ✅ 🎯

<span class="to-icon">❤️</span>

Кнопки-иконки

❤️ ⭐ ⚙️

<button class="to-icon-button">❤️</button>

💓 Пульсация Pulse

Индикаторы

<div class="to-pulse" data-color="primary"></div>

⬆️ Наверх Scroll Top

Демо

↑

<button class="to-scroll-top">↑</button>

Появится после прокрутки

💬 Диалоги Dialogs

Модальное окно

Открыть диалог

Диалоговое окно (демо)

🔄 Переключатели Toggles

Toggle Buttons

Вкл Выкл

<button class="to-toggle-button" data-selected="true">Вкл</button>

Segmented Control

День Неделя Месяц

Группа переключателей