Button
Кнопка действия. Варианты оформления и размеры задаются пропсами.
Живой код — редактируйте
<> <Button>Сохранить</Button> <Button variant="brand">Подключить</Button> <Button variant="outline">Отмена</Button> <Button variant="secondary">Ещё</Button> <Button variant="ghost">Скрыть</Button> <Button variant="destructive">Удалить</Button> <Button variant="link">Подробнее</Button> </>
Размеры
Живой код — редактируйте
<> <Button size="xs">xs</Button> <Button size="sm">sm</Button> <Button>default</Button> <Button size="lg">lg</Button> <Button size="xl" variant="brand"> xl </Button> </>
С иконкой
Живой код — редактируйте
<> <Button> <AddLineIcon /> Добавить проект </Button> <Button size="icon" variant="outline" aria-label="Добавить"> <AddLineIcon /> </Button> <Button size="icon-sm" variant="ghost" aria-label="Закрыть"> <CloseLineIcon /> </Button> </>
Ссылка вместо кнопки
asChild передаёт оформление дочернему элементу — так кнопка становится ссылкой (<a> или Link из Next) без
вложенных интерактивных элементов.
Живой код — редактируйте
<Button asChild variant="outline"> <a href="#">Открыть документацию</a> </Button>
Пропсы
Prop
Type
Также принимает стандартные атрибуты ButtonHTMLAttributesHTMLAttributes