@yandex/ui

# Button <a href='https://github.yandex-team.ru/search-interfaces/frontend/tree/master/packages/lego-components/src/Button' target='_blank'><img src='https://badger.yandex-team.ru/custom/[Исходники]/[Github ][green]/badge.svg' /></a> <a href='https://search.yandex-team.ru/stsearch?text=Button.ts&facet.queue=ISL&facet.type=bug&facet.status=128' target='_blank'><img src='https://badger.yandex-team.ru/custom/[Известные проблемы]/[Startrek][blue]/badge.svg' /></a>  Компонент для создания кнопок.  ## Пример использования Конфигурация темы на уровне проекта: ```ts // src/lib/theme.ts import { configureRootTheme } from '@yandex-lego/components/Theme' import { theme } from '@yandex-lego/components/Theme/presets/default' configureRootTheme({ theme }) ``` Использование с нужным набором модификаторов: ```ts // src/App.ts import React from 'react' import { compose } from '@bem-react/core' import { Button as ButtonDesktop, withSizeM, withViewDefault, } from '@yandex-lego/components/Button/desktop' const Button = compose(withSizeM, withViewDefault)(ButtonDesktop) const App = () => ( <Button view="default" size="m"> Button </Button> ) ``` Использование с полным набором модификаторов: ```ts // src/App.ts import React from 'react' import { Button } from '@yandex-lego/components/Button/desktop/bundle' const App = () => ( <Button view="default" size="m"> Button </Button> ) ``` ## Примеры ### Вид кнопки Чтобы изменить вид кнопки, установите свойство `view` в одно из следующих значений: `"default"`, `"action"`, `"link"`, `"pseudo"`, `"clear"`, `"raised"`. {{%story::desktop:controls-button-desktop--view%}} ### Стилевое оформление Чтобы изменить стилевое оформление кнопки, установите свойство `theme` в одно из следующих значений: `"normal"`, `"action"`, `"clear"`, `"link"`, `"pseudo"`, `"raised"`, `"websearch"`. {{%story::desktop:controls-button-desktop--theme%}} ### Размер кнопки Чтобы изменить размер кнопки, установите свойство `size` в одно из следующих значений: `"l"`, `"m"`, `"s"`. {{%story::desktop:controls-button-desktop--size%}} ### Границы кнопки Чтобы изменить границы кнопки, установите свойство `pin` в одно из допустимых значений. {{%story::desktop:controls-button-desktop--pin%}} ### Ширина кнопки Чтобы изменить ширину кнопки, установите свойство `width` в одно из следующих значений: - `max` — ширина определяется шириной контейнера. Если ширина текста больше ширины контейнера, текст обрезается многоточием. - `auto` — ширина определяется шириной текста. Ширина кнопки не может быть больше ширины контейнера. Если ширина текста больше ширины контейнера, текст обрезается многоточием. {{%story::desktop:controls-button-desktop--width%}} ### Выравнивание по базовой линии Чтобы выровнять кнопки по базовой линии, установите свойство `baseline` в значение `true`. ### Тип кнопки Чтобы задать тип кнопке, установите свойство `type` в одно из указанных ниже значений. | Свойство | Тип | Описание | | --------- | -------------------- | ------------------------------------------------------------------------------------------------------ | | type? | `"link" \| "submit"` | Тип кнопки | | url? | `string` | Адрес | | target? | `string` | Поведение, которое определяет, где показать содержимое по ссылке | | rel? | `string` | Отношения между ссылками | | tabIndex? | `number` | HTML-атрибут tabIndex; определяет последовательность перехода между ссылками при нажатии на клавишу Tab | ## Свойства  | Свойство | Тип | По умолчанию | Описание | | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | addonAfter? | `string \| number \| false \| true \| {} \| ReactElement<any, string \| ((props: any) => ReactElement<any, string \| ... \| (new (props: any) => Component<any, any, any>)>) \| (new (props: any) => Component<any, any, any>)> \| ReactNodeArray \| ReactPortal` | — | Дополнительный контент после `children` | | addonBefore? | `string \| number \| false \| true \| {} \| ReactElement<any, string \| ((props: any) => ReactElement<any, string \| ... \| (new (props: any) => Component<any, any, any>)>) \| (new (props: any) => Component<any, any, any>)> \| ReactNodeArray \| ReactPortal` | — | Дополнительный контент перед `children` | | checked? | `false \| true` | — | Кнопка нажата | | icon? | `(className: string) => ReactElement<IIconProps, string \| ((props: any) => ReactElement<any, string \| ... \| (new (props: any) => Component<any, any, any>)>) \| (new (props: any) => Component<...>)>` | — | Иконка на кнопке | | iconLeft? | `(className: string) => ReactElement<IIconProps, string \| ((props: any) => ReactElement<any, string \| ... \| (new (props: any) => Component<any, any, any>)>) \| (new (props: any) => Component<...>)>` | — | Иконка слева от текста кнопки | | iconRight? | `(className: string) => ReactElement<IIconProps, string \| ((props: any) => ReactElement<any, string \| ... \| (new (props: any) => Component<any, any, any>)>) \| (new (props: any) => Component<...>)>` | — | Иконка справа от текста кнопки | | innerRef? | `(instance: HTMLElement) => void \| RefObject<HTMLElement>` | — | Ссылка на корневой DOM-элемент компонента | | controlRef? | `RefObject<ContainerElement>` | — | Ссылка на DOM-элемент нативного контрола | | pressKeys? | `KeyboardKeys[]` | `[Keys.SPACE, Keys.ENTER]` | Набор клавиш, при нажатии на которые выставляется состояние `pressed` | | progress? | `false \| true` | — | Стилевое оформление для визуального выделения прогресса | | prvntKeys? | `KeyboardKeys[]` | `[]` | Набор клавиш, при нажатии на которые прерывается событие | | as? | `"symbol" \| "object" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| "canvas" \| "caption" \| "cite" \| "code" \| "col" \| "colgroup" \| "data" \| "datalist" \| "dd" \| "del" \| "details" \| "dfn" \| "dialog" \| "div" \| "dl" \| "dt" \| "em" \| "embed" \| "fieldset" \| "figcaption" \| "figure" \| "footer" \| "form" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "head" \| "header" \| "hgroup" \| "hr" \| "html" \| "i" \| "iframe" \| "img" \| "input" \| "ins" \| "kbd" \| "keygen" \| "label" \| "legend" \| "li" \| "link" \| "main" \| "map" \| "mark" \| "menu" \| "menuitem" \| "meta" \| "meter" \| "nav" \| "noindex" \| "noscript" \| "ol" \| "optgroup" \| "option" \| "output" \| "p" \| "param" \| "picture" \| "pre" \| "progress" \| "q" \| "rp" \| "rt" \| "ruby" \| "s" \| "samp" \| "script" \| "section" \| "select" \| "small" \| "source" \| "span" \| "strong" \| "style" \| "sub" \| "summary" \| "sup" \| "table" \| "tbody" \| "td" \| "textarea" \| "tfoot" \| "th" \| "thead" \| "time" \| "title" \| "tr" \| "track" \| "u" \| "ul" \| "var" \| "video" \| "wbr" \| "webview" \| "svg" \| "animate" \| "animateMotion" \| "animateTransform" \| "circle" \| "clipPath" \| "defs" \| "desc" \| "ellipse" \| "feBlend" \| "feColorMatrix" \| "feComponentTransfer" \| "feComposite" \| "feConvolveMatrix" \| "feDiffuseLighting" \| "feDisplacementMap" \| "feDistantLight" \| "feDropShadow" \| "feFlood" \| "feFuncA" \| "feFuncB" \| "feFuncG" \| "feFuncR" \| "feGaussianBlur" \| "feImage" \| "feMerge" \| "feMergeNode" \| "feMorphology" \| "feOffset" \| "fePointLight" \| "feSpecularLighting" \| "feSpotLight" \| "feTile" \| "feTurbulence" \| "filter" \| "foreignObject" \| "g" \| "image" \| "line" \| "linearGradient" \| "marker" \| "mask" \| "metadata" \| "mpath" \| "path" \| "pattern" \| "polygon" \| "polyline" \| "radialGradient" \| "rect" \| "stop" \| "switch" \| "text" \| "textPath" \| "tspan" \| "use" \| "view" \| ComponentClass<any, any> \| FunctionComponent<any>` | `'button'` | HTML-атрибут для рендера кнопки | | children? | `string \| number \| false \| true \| {} \| ReactElement<any, string \| ((props: any) => ReactElement<any, string \| ... \| (new (props: any) => Component<any, any, any>)>) \| (new (props: any) => Component<any, any, any>)> \| ReactNodeArray \| ReactPortal` | — | Текст кнопки | | type? | `string` | `'button'` | Тип кнопки | | disabled? | `false \| true` | — | Неактивное состояние кнопки: состояние, при котором кнопка отображается, но недоступна для действий пользователя | | className? | `string` | — | Дополнительный класс | | id? | `string` | — | Уникальный id компонента | | onKeyDown? | `(event: KeyboardEvent<ContainerElement>) => void`