RatingButton

import { useId, useState } from 'react';
import { SfRatingButton } from '@storefront-ui/react';

export default function RatingButtonBasic() {
  const labelId = useId();
  const [rating, setRating] = useState(0);

  return (
    <div>
      <p id={labelId}>Select Rating</p>
      <SfRatingButton value={rating} onChange={setRating} aria-labelledby={labelId} />
    </div>
  );
}

import { useState } from 'react';
import { SfRatingButton } from '@storefront-ui/react';

export default function RatingButtonSizes() {
  const [rating1, setRating1] = useState(0);
  const [rating2, setRating2] = useState(0);
  const [rating3, setRating3] = useState(0);

  return (
    <div>
      <SfRatingButton value={rating1} onChange={setRating1} size="sm" />
      <SfRatingButton value={rating2} onChange={setRating2} size="base" />
      <SfRatingButton value={rating3} onChange={setRating3} size="lg" />
    </div>
  );
}

import { useId, useState } from 'react';
import { SfRatingButton } from '@storefront-ui/react';

export default function RatingButtonMax() {
  const labelId = useId();
  const [rating, setRating] = useState(5);

  return (
    <div>
      <p id={labelId}>Select Rating</p>
      <SfRatingButton max={10} value={rating} onChange={setRating} aria-labelledby={labelId} />
    </div>
  );
}

import { useId, useState } from 'react';
import { SfIconFavorite, SfIconFavoriteFilled, SfRatingButton } from '@storefront-ui/react';

export default function RatingButtonCustomIcon() {
  const labelId = useId();
  const [rating, setRating] = useState(0);

  return (
    <div>
      <p id={labelId}>Select Rating</p>
      <SfRatingButton value={rating} onChange={setRating} aria-labelledby={labelId}>
        {({ isFilled, iconSize }) =>
          isFilled ? (
            <SfIconFavoriteFilled
              role="none"
              size={iconSize}
              className="text-red-700 cursor-pointer peer-disabled:cursor-default peer-disabled:text-neutral-500 peer-focus-visible:outline"
            />
          ) : (
            <SfIconFavorite
              role="none"
              size={iconSize}
              className="text-neutral-500 cursor-pointer peer-disabled:cursor-default peer-disabled:text-neutral-400 peer-focus-visible:outline"
            />
          )
        }
      </SfRatingButton>
    </div>
  );
}