website/sdds-cs-docs/docs/components/Chip.mdx - dev - sdds/plasma

website/sdds-cs-docs/docs/components/Chip.mdx
106 строк3 KB
TitanKuzmich
feat(sdds-cs): add xs size for Chip
22 янв 2025, 12:43
22 янв 2025, 12:4366a8fb0
---
id: chip
title: Chip
---

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

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

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

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

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

Так же есть свойство `contentClearButton`, которое позволяет прокинуть custom **иконку**.
Отключить отображение иконки закрытия можно с помощью свойства `hasClear`.

```tsx live
import React from 'react';
import { Chip } from '@salutejs/sdds-cs';
import { IconDownload } from '@salutejs/plasma-icons';

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

            <Chip text="Текст" contentLeft={<IconDownload color="inherit" />} />

            <Chip contentLeft={<IconDownload color="inherit" />} />

            <Chip text="Текст" />

            <Chip text="Текст" contentLeft={<IconDownload color="inherit" />} />

            <Chip>
                Текст
            </Chip>

            <Chip text="Текст" hasClear={false} />
        </div>
    );
}
```

## Примеры

### Размер Chip

```tsx live
import React from 'react';
import { Chip } from '@salutejs/sdds-cs';

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

### Вид Chip
Вид Chip задается с помощью свойства `view`. Возможные значения свойства `view`:
+ `"default"` – основная;
+ `"secondary"` – вторичная;
+ `"accent"` – акцентный.

```tsx live
import React from 'react';
import { Chip } from '@salutejs/sdds-cs';

export function App() {
    return (
        <div>
            <Chip text="Chip" size="s" view="default" />
            <Chip text="Chip" size="s" view="secondary" />
            <Chip text="Chip" size="s" view="accent" />
        </div>
    );
}
```

### Размер Chip
Размер Chip задается с помощью свойства `size`:

```tsx live
import React from 'react';
import { Chip } from '@salutejs/sdds-cs';

export function App() {
    return (
        <div>
            <Chip text="Chip" size="s" view="default" />
            <Chip text="Chip" size="xs" view="default" />
        </div>
    );
}
```