Chip

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

Chip​

Storybook

Использование​

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

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

Так же есть свойство свойство contentClearButton, которое позволяет прокинуть кастомную иконку.

Live Editor
Result
Open in CodeSandbox

Примеры​

Размер Chip​

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

Live Editor
Result
Open in CodeSandbox

Вид Chip​

Вид Chip задается с помощью свойства view. Возможные значения свойства view:

  • "default" – основной;
  • "secondary" – вторичный;
  • "accent" – акцентый.
Live Editor
Result
Open in CodeSandbox