# Button: Руководства ## Паттерны ### Основное действие формы Когда использовать: - Форме нужно одно ясное основное действие. Заметки по композиции: - Делайте основное действие визуально сильнее соседних второстепенных. - Используйте `type='submit'` осознанно. Компромиссы: - Действие выглядит однозначно. - Интерфейс становится визуально шумным, если слишком много кнопок соревнуются за внимание. ```tsx import { Button, Label, TextField, TextFieldInput } from '@vega-ui/react'; import { FormEvent, useState } from 'react'; export default function FormFooterActions() { const [submitted, setSubmitted] = useState(''); const handleSubmit = (event: FormEvent) => { event.preventDefault(); const data = new FormData(event.currentTarget); setSubmitted(`${data.get('workspace')} (${data.get('slug')})`); }; return ( ); } ``` ### Пара с второстепенным действием Когда использовать: - Локальному сценарию нужны основное и второстепенное действия рядом. Заметки по композиции: - Для отмены или возврата используйте менее акцентное оформление. - Тексты кнопок должны дополнять друг друга, а не путать. Компромиссы: - Легко считывается. - Сбивает с толку, если обе кнопки одинаково акцентны. ```tsx import { Button } from '@vega-ui/react'; export default function ActionHierarchy() { return (

); } ``` ### Навигация с видом кнопки Когда использовать: - Навигация должна выглядеть как кнопка, но семантически оставаться навигацией. Заметки по композиции: - Используйте `asChild` с настоящей ссылкой. - Сохраняйте семантику ссылки, если взаимодействие действительно ведёт на другую страницу. Компромиссы: - Сильный визуальный акцент для навигации. - Легко злоупотребить там, где обычная ссылка была бы понятнее. ```tsx import { Button, Icon } from '@vega-ui/react'; import { ArrowRightIcon, ExternalLinkIcon } from '@vega-ui/icons'; import './examples.css'; export default function NavigationWithButtonVisuals() { return (

); } ``` ## Сравнение ### Быстрое правило выбора Используйте `Button` для явных действий, которые инициирует пользователь. ### `Button` или `Link` Используйте `Button`, когда: - действие меняет состояние или отправляет данные Используйте `Link`, когда: - взаимодействие в первую очередь ведёт на другую страницу Главный компромисс: у кнопки семантика действия, у ссылки — семантика навигации. ### `Button` или `IconButton` Используйте `Button`, когда: - видимый текст делает действие понятнее Используйте `IconButton`, когда: - действие компактное и уже узнаваемо как контрол из одной иконки Главный компромисс: кнопка понятнее, кнопка-иконка компактнее. ### `Button` или `ButtonBase` Используйте `Button`, когда: - продуктовому коду нужна стандартная текстовая поверхность действия Используйте `ButtonBase`, когда: - для кастомной композиции нужен низкоуровневый примитив действия ### Выбирайте этот компонент, когда - Основная задача — действие, а не навигация. - Видимый текст помогает понять действие. - Интерфейсу подходит стандартная поверхность кнопки. - компонент должен быть выбором по умолчанию для действия, а не низкоуровневым примитивом ### Не выбирайте этот компонент, когда - Основная задача — навигация. - Действие обозначено только иконкой и места мало. - На самом деле это текстовая ссылка в основном тексте. ## Решение проблем ### Кнопка неожиданно отправляет форму #### Симптом Кнопка находится внутри формы, и клик по ней отправляет форму. #### Вероятная причина У `Button` нет `type` по умолчанию, поэтому, как и нативный `