Size Property

Sets the size of a component. Supports predefined scale values and custom CSS sizes.

Medium

import { Badge } from "@locus-ui/components";
<Badge size="md" variant="solid">  Medium</Badge>

View Source

Examples

Size Scale

The size prop accepts values xs, sm, md, lg, and xl.

sizes.tsx

import { Badge } from "@locus-ui/components";
const sizes = ["xs", "sm", "md", "lg", "xl"];
return sizes.map((size) => (  <Badge key={size} size={size} variant="solid">    {size.toUpperCase()}  </Badge>));

Custom Size

The size prop also accepts custom CSS values.

Custom Size

custom-size.tsx

import { Badge } from "@locus-ui/components";
<Badge size="2.5rem" variant="solid">  Custom Size</Badge>