# circle

> A shape pattern for circular boxes: a square aspect ratio plus full radius — an avatar frame, a status dot, an icon badge.

```ts
import { circle } from "@sdxc/u/size";
```

A shape pattern for circular boxes: a square aspect ratio plus full
radius — an avatar frame, a status dot, an icon badge. Composes
`u.aspect("square")` and `u.rounded("full")`.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.circle()` | `css({ aspectRatio: "1 / 1", borderRadius: "var(--ui-radius-full, 9999px)" })` |

## Examples

### Basic example

Use `circle()` with a width to draw a circular frame, like an avatar:

```tsx
<div mix={[...]}>
	<img src={...} alt="" mix={[circle(), is(12), fit("cover")]} />
	<img src={...} alt="" mix={[circle(), is(16), fit("cover")]} />
	<img src={...} alt="" mix={[circle(), is(20), fit("cover")]} />
</div>
```

### Initials and badges

Any content fits a `circle()`, like an avatar's initials or a notification count:

```tsx
<div mix={[...]}>
	<div mix={[circle(), is(16), ...]}>SX</div>
	<div mix={[circle(), is(12), ...]}>SX</div>
	<div mix={[circle(), is(6), ...]}>3</div>
</div>
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.circle())
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.circle())
```

## Customizing your theme

### Customizing radii

Redefine a `--ui-radius-*` variable to change a step, or declare a new one:

```css
:root {
	--ui-radius-2xl: 1rem;
}
```

```ts
declare module "@sdxc/u" {
	interface Radii {
		"2xl": true;
	}
}
```

The new name is then accepted wherever the scale is:

```ts
rounded("2xl")
```

## Signature

```ts
u.circle()
```