Favourite

Toggle для «избранного» — карточка товара, трек в плейлисте, пост в ленте. Переключается между пустой и заполненной иконкой (звезда или сердце).

Когда использовать

• «Добавить в избранное», «лайк», «в wishlist».
• Каталоги, ленты, плейлисты — любой UI с персональными коллекциями.

Когда не нужен Favourite: для булевых настроек — Switch; для выбора опций — Checkbox.

Анатомия

Size

xs — для плотных списков, s — дефолт в карточках.

Favourite icon

Форма иконки: star — «в избранное», heart — «нравится».

Установка

pnpm add @cloud-ru/ds-toggles

import { Favourite } from '@cloud-ru/ds-toggles'

Примеры использования

1. Звезда

import { Favourite } from '@cloud-ru/ds-toggles';

export function FavouriteStar() {
  return <Favourite icon='star' defaultChecked />;
}

2. Сердце

import { Favourite } from '@cloud-ru/ds-toggles';

export function FavouriteHeart() {
  return <Favourite icon='heart' defaultChecked />;
}

3. Все состояния

import { Favourite } from '@cloud-ru/ds-toggles';

export function FavouriteStates() {
  return (
    <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'center' }}>
      <Favourite icon='star' />
      <Favourite icon='star' defaultChecked />
      <Favourite icon='heart' disabled />
      <Favourite icon='heart' loading />
    </div>
  );
}

Props

Types

FavouriteProps

Unions

FavouriteIcon

Size

Storybook

Figma