website/plasma-ui-docs/docs/components/Button.mdx - dev - sdds/plasma

website/plasma-ui-docs/docs/components/Button.mdx
168 строк6 KB
Vadim Kudriavtsev
fix: Button & IconButton storybook & docs
22 янв 2025, 10:15
22 янв 2025, 10:15a077184
---
id: button
title: Button
---

import { PropsTable, Description, StorybookLink } from '@site/src/components';

# Button
Кнопки могут отображаться в нескольких размерах и цветах, могут содержать текст и/или иконку.

<Description name="Button" />
<PropsTable name="Button" />
<StorybookLink name="Button" />

## ActionButton
<Description name="ActionButton" />
<PropsTable name="ActionButton" />

## Использование
Компонент `Button` может содержать текст, который указывается в
свойстве `text`, или любой контент напрямую через `children`.

Свойство text можно использовать вместе со свойствами `contentLeft` и `contentRight`.
С их помощью можно размещать **иконку** слева или справа от текста.

Компонент `ActionButton` принимает только `children`.

```tsx live
import React from 'react';
import { Button, ActionButton } from '@salutejs/plasma-ui';
import { IconDownload } from '@salutejs/plasma-icons';

export function App() {
    return (
        <div>
            <Button text="Текст" />

            <Button text="Текст" contentLeft={<IconDownload />} />

            <Button text="Текст" contentRight={<IconDownload />} />

            <Button contentLeft={<IconDownload />} />

            <Button text="Текст" isLoading />

            <Button text="Текст" isLoading loader={<div>Loader...</div>} />

            <Button>
                <IconDownload />
                <span>Текст</span>
            </Button>

            <ActionButton>
                <IconDownload />
            </ActionButton>
        </div>
    );
}
```

## Примеры

### Размер кнопки
Размер кнопки задается с помощью свойства `size`. Возможные значения свойства: `"l"`, `"m"` или `"s"`:

```tsx live
import React from 'react';
import { Button } from '@salutejs/plasma-ui';

export function App() {
    return (
        <div>
            <Button text="Button" size="l" />
            <Button text="Button" size="m" />
            <Button text="Button" size="s" />
        </div>
    );
}
```

### Вид кнопки
Вид кнопки задается с помощью свойства `view`. Возможные значения свойства `view`:
+ `"primary"` – основная;
+ `"secondary"` – вторичная;
+ `"success"` – успешное завершение;
+ `"warning"` – предупреждение;
+ `"critical"` – ошибка;
+ `"checked"` – выбранное состояние;
+ `"overlay"` – для использования в мультимедия-контенте;
+ `"clear"` – без цветового сопровождения.

```tsx live
import React from 'react';
import { Button } from '@salutejs/plasma-ui';

export function App() {
    return (
        <div>
            <Button text="Кнопка" size="s" view="primary" />
            <Button text="Кнопка" size="s" view="secondary" />
            <Button text="Кнопка" size="s" view="success" />
            <Button text="Кнопка" size="s" view="warning" />
            <Button text="Кнопка" size="s" view="critical" />
            <Button text="Кнопка" size="s" view="checked" />
            <Button text="Кнопка" size="s" view="overlay" />
            <Button text="Кнопка" size="s" view="clear" />
        </div>
    );
}
```

### Границы кнопки
Границы кнопки задаются с помощью свойства `pin`. Возможные значения свойства `pin`:
+ `square` – обычное скругление;
+ `circle` – сильное скругление;
+ `clear` – нет скругления.

```tsx live
import React from 'react';
import { Button } from '@salutejs/plasma-ui';

export function App() {
    return (
        <div>
            <Button pin="square-square">Button</Button>
            <Button pin="square-clear">Button</Button>
            <Button pin="clear-square">Button</Button>
            <Button pin="clear-clear">Button</Button>
            <Button pin="clear-circle">Button</Button>
            <Button pin="circle-clear">Button</Button>
            <Button pin="circle-circle">Button</Button>
        </div>
    );
}
```

### Квадратные и круглые кнопки
Для отображения иконок и/или текста в квадратных или круглых кнопках с **равными сторонами**,
используйте компонент `Button` и свойство `contentLeft`, в которое требуется передать нужное значение.

При использовании `ActionButton` указывайте контент через `children`.

По умолчанию границы кнопки **квадратные** (со скругленными углами) — `pin="square-square"`.
**Круглые** границы кнопки можно сделать с помощью свойства `pin` со значением `"circle-circle"`.

```tsx live
import React from 'react';
import { Button, ActionButton } from '@salutejs/plasma-ui';
import { IconDownload } from '@salutejs/plasma-icons';

export function App() {
    return (
        <div>
            <Button contentLeft={<IconDownload />} />

            <Button contentLeft={<IconDownload />} pin="circle-circle" />

            <ActionButton>
                <IconDownload />
            </ActionButton>

            <ActionButton pin="circle-circle">
                <IconDownload />
            </ActionButton>
        </div>
    );
}
```