website/plasma-web-docs/docs/components/EmbedIconButton.mdx - dev - sdds/plasma

website/plasma-web-docs/docs/components/EmbedIconButton.mdx
105 строк3 KB
Ilya
feat(*): add embediconbutton docs
06 авг 2025, 14:21
06 авг 2025, 14:218790611
---
id: EmbedIconButton
title: EmbedIconButton
---

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

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

## EmbedIconButton
<Description name="EmbedIconButton" />
<PropsTable name="EmbedIconButton" exclude={['css']} />

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

```tsx live
import React from 'react';
import { EmbedIconButton } from '@salutejs/plasma-web';
import { IconClose } from '@salutejs/plasma-icons';

export function App() {
    return (
        <div>
            <EmbedIconButton>
                <IconClose color="inherit" />
            </EmbedIconButton>
        </div>
    );
}
```

## Примеры

### Размер кнопки
Размер кнопки задается с помощью свойства `size`.

```tsx live
import React from 'react';
import { EmbedIconButton } from '@salutejs/plasma-web';
import { IconClose } from '@salutejs/plasma-icons';

export function App() {
    return (
        <div>
            <EmbedIconButton size="l">
                <IconClose color="inherit" />
            </EmbedIconButton>
            <EmbedIconButton size="m">
                <IconClose color="inherit" />
            </EmbedIconButton>
            <EmbedIconButton size="s">
                <IconClose color="inherit" />
            </EmbedIconButton>
        </div>
    );
}
```

### Вид кнопки
Вид кнопки задается с помощью свойства `view`.

Возможные значения свойства `view`:
+ `"default"` – по умолчанию;
+ `"accent"` – акцентная;
+ `"secondary"` – вторичная;
+ `"clear"` – без цветового сопровождения.
+ `"positive"` – успешное завершение;
+ `"warning"` – предупреждение;
+ `"negative"` – ошибка;

```tsx live
import React from 'react';
import { EmbedIconButton } from '@salutejs/plasma-web';
import { IconClose } from '@salutejs/plasma-icons';

export function App() {
    return (
        <div style={{ display: 'flex', flexWrap: 'wrap' }}>
            <EmbedIconButton size="s" view="default">
                <IconClose color="inherit" />
            </EmbedIconButton>
            <EmbedIconButton size="s" view="accent">
                <IconClose color="inherit" />
            </EmbedIconButton>
            <EmbedIconButton size="s" view="secondary">
                <IconClose color="inherit" />
            </EmbedIconButton>
            <EmbedIconButton size="s" view="clear">
                <IconClose color="inherit" />
            </EmbedIconButton>
            <EmbedIconButton size="s" view="positive">
                <IconClose color="inherit" />
            </EmbedIconButton>
            <EmbedIconButton size="s" view="warning">
                <IconClose color="inherit" />
            </EmbedIconButton>
            <EmbedIconButton size="s" view="negative">
                <IconClose color="inherit" />
            </EmbedIconButton>
        </div>
    );
}
```