Напиши документацию для компонента {{component}}.

Структура

{{component}}

[1-2 предложения: что делает и когда использовать]

Когда использовать

• ✓ Сценарий 1
• ✓ Сценарий 2
• ✗ НЕ использовать в сценарии 3 (используй [другой компонент])

API

Варианты

[Скриншот / код для каждого варианта]

Состояния

• Default
• Hover
• Active
• Focus (видимый!)
• Disabled
• Loading (если применимо)

Доступность

• Семантический HTML (<button>, не <div>)
• ARIA: что обязательно, что опционально
• Клавиатура: Enter / Space / Esc
• Фокус-индикатор: что появляется
• Screen reader: что слышит пользователь

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

<Button variant="primary" onClick={...}>
  Сохранить
</Button>

Не используй так

<!-- Плохо: длинный текст -->
<Button>Нажмите здесь чтобы сохранить ваши изменения...</Button>

<!-- Плохо: иконка без accessible name -->
<Button><Icon /></Button>

Похожие компоненты

• Link — когда нужна навигация
• IconButton — только иконка

Изменения

• v1.2: добавили loading state
• v1.1: добавили variant="ghost"

Принципы

• API минимальный. Если можно без prop'а — не делай
• Примеры — реальные, не "Foo Bar"
• "Не используй так" — обязательная секция
• Доступность не в конце — это базовое требование