ChipAssist
Кликабельный чип-кнопка. Инициирует действие в контексте фильтров, тегов и быстрых команд. Лейбл обязателен, иконка опциональна.
Когда использовать
- Для inline-действий рядом с контентом: добавить тег, применить быструю команду.
- Когда действие визуально должно восприниматься как чип в ряду фильтров, а не как классическая кнопка.
Когда не нужен ChipAssist:
- Для основного CTA экрана — используйте
Button. - Для переключения бинарного состояния — используйте
ChipToggle.
Анатомия
Size (default s)
s— для плотных тулбаров и строк фильтров.m— стандартный размер.l— для крупных форм.
Icon
Опциональная иконка перед лейблом через проп icon. При loading иконка заменяется спиннером.
Состояния
disabled— отключает взаимодействие.loading— показывает спиннер вместо иконки и блокирует клик.
Установка
pnpm add @cloud-ru/ds-chipsimport { ChipAssist } from '@cloud-ru/ds-chips';Примеры использования
Три размера в ряд
tsx
import { ChipAssist } from '@cloud-ru/ds-chips';
export function AssistSizes() {
return (
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
<ChipAssist size='s' label='Small' onClick={() => {}} />
<ChipAssist size='m' label='Medium' onClick={() => {}} />
<ChipAssist size='l' label='Large' onClick={() => {}} />
</div>
);
}С иконкой
tsx
import { ChipAssist } from '@cloud-ru/ds-chips';
import { PlusSVG } from '@cloud-ru/ds-icons/interface/system';
export function AssistWithIcon() {
return <ChipAssist label='Добавить тег' icon={<PlusSVG />} size='m' onClick={() => {}} />;
}Состояния
tsx
import { ChipAssist } from '@cloud-ru/ds-chips';
import { PlusSVG } from '@cloud-ru/ds-icons/interface/system';
export function AssistStates() {
return (
<div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
<ChipAssist label='Обычный' icon={<PlusSVG />} onClick={() => {}} />
<ChipAssist label='Отключён' icon={<PlusSVG />} disabled onClick={() => {}} />
<ChipAssist label='Загрузка' icon={<PlusSVG />} loading onClick={() => {}} />
</div>
);
}Props
Types
Props
ChipAssistProps| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
className | string | — | no | CSS-класс |
data-test-id | string | — | no | |
disabled | boolean | — | no | Отключён |
icon | ReactNode | — | no | Иконка |
label | string | — | yes | Текст чипа |
loading | boolean | — | no | Состояние загрузки |
onClick | MouseEventHandler<HTMLButtonElement> | — | yes | Колбек обработки клика |
size | "l" | "m" | "s" | m | no | Размер |
tabIndex | number | — | no | Индекс в порядке фокусировки |
truncateVariant | "end" | "middle" | middle | no | Вариант обрезания строки |
Unions
Types
ChipAssistProps
Unions
Size
Related props
TruncateStringProps
Storybook
Figma
Смотри также
- ChipToggle — чип с состоянием выбора.
- Button — основные кнопки действий.