Logo

A brand mark rendered as a fixed-size, softly rounded host stacking an image layer, an initials fallback.

Remix

12 members · Pro plan

ACSX+4

View code

<div mix={[vstack({ gap: 5, align: "start" })]}>
	<div mix={[hstack({ gap: 3, align: "center" })]}>
		<Logo size="lg">
			<Logo.Image
				src="https://avatars.githubusercontent.com/u/1312099"
				alt="Remix"
				mix={[imageFallback(), when("&[data-image-error]", hidden())]}
			/>
			<Logo.Fallback>RX</Logo.Fallback>
			<Logo.Badge aria-label="Verified organization" />
		</Logo>
		<div mix={[vstack({ gap: 0.5, align: "start" })]}>
			<p mix={[m(0), text("sm"), weight("semibold")]}>Remix</p>
			<p mix={[m(0), text("xs"), fg("neutral.muted")]}>12 members · Pro plan</p>
		</div>
	</div>

	<Logo.Group>
		<Logo>
			<Logo.Image
				src="https://avatars.githubusercontent.com/u/1312099"
				alt="Remix"
				mix={[imageFallback(), when("&[data-image-error]", hidden())]}
			/>
			<Logo.Fallback>RX</Logo.Fallback>
		</Logo>
		<Logo>
			<Logo.Image
				src="https://example.com/missing-logo.png"
				alt="Acme Industries"
				mix={[imageFallback(), when("&[data-image-error]", hidden())]}
			/>
			<Logo.Fallback>AC</Logo.Fallback>
		</Logo>
		<Logo>
			<Logo.Fallback>SX</Logo.Fallback>
		</Logo>
		<Logo.Group.Count>+4</Logo.Group.Count>
	</Logo.Group>
</div>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

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

<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

Read from the component's own types, so every prop, every default and every allowed value is listed.

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