# Logo

> A brand mark rendered as a fixed-size, softly rounded host stacking an image layer, an initials fallback, and an optional corner status badge, plus a way to overlap several instances into one group with a trailing overflow count.

```ts
import { Logo } from "@sdxc/ui";
```

Renders a fixed-size, softly rounded brand-mark host that stacks whichever
of Logo.Image, Logo.Fallback, and Logo.Badge a
consumer composes as children, with square corner rounding fixed in place.

## Examples

```tsx
<Logo>
	<Logo.Image src={org.logoUrl} alt={org.name} />
	<Logo.Fallback>{initials}</Logo.Fallback>
</Logo>
```

```tsx
<Logo size="lg">
	<Logo.Image src={org.logoUrl} alt={org.name} />
	<Logo.Fallback>{initials}</Logo.Fallback>
	<Logo.Badge aria-label={t("status.verified")} />
</Logo>
```

## Props

Also accepts everything in `Omit<ImagePlaceholder.Props, "shape">`.