Circle

A circular container component with built-in colour variants and sizes, ideal for displaying icons, initials, or status indicators.

Anatomy

<script>
  import { Circle } from "@saas-ui/svelte/layout/circle";
</script>

<Circle size="md" colour="blue" variant="solid">
  A
</Circle>

Basic circle with configurable size, variant, and colour. Use for avatars, badges, or icon containers.

<Circle>1</Circle>

Prop	Type	Default	Description
`size`	`xs \| sm \| md \| lg \| xl`	`md`	The size of the circle.
`variant`	`solid \| subtle \| outline \| plain`	`solid`	The visual style of the circle.
`colour`	`accent \| gray \| zinc \| neutral \| stone \| slate \| red \| orange \| amber \| yellow \| lime \| green \| emerald \| teal \| cyan \| sky \| blue \| indigo \| violet \| purple \| fuchsia \| pink \| rose`	`gray`	The colour of the component.
`children`	`any`	-	The content to be rendered inside the component.
`class`	`text`	-	Additional CSS classes to apply.