Tag component for categorizing and labeling content with various styles and interactive features.
Experiment with all the properties of the Rating component in real time.
Text to display in the rating component.
Color scheme of the rating.
Visual style of the rating.
Position of the rating text.
Size of the rating component.
The Rating component allows users to rate content using a set of icons.
import { Rating } from "lambda-ui-components";
export default function App() {
const [value, setValue] = useState(0);
return (
<div className="flex gap-4">
<Rating value={value} onChange={setValue} />
</div>
);
}You can display text alongside the rating using the text prop. The text changes based on the rating value.
You can use custom icons for the rating items using the customIcon prop.
You can control the Rating component by using the value and onChange props with useState.
Current rating: 3
Prop | Default | Type |
|---|---|---|
text | undefined | string |
icon | undefined | React.ReactNode |
onClose | undefined | () => void |
variant | "soft" | "solid" | "soft" | "outlined" | "ghost" |
color | "neutral" | "neutral" | "primary" | "secondary" | "success" | "danger" | "warning" | "info" |
size | "medium" | "tiny" | "small" | "medium" | "large" |
radius | "medium" | "none" | "tiny" | "small" | "medium" | "large" | "full" |