Logo
Brand lockup: a mark beside a wordmark. The mark is an SVG, an image, or a monogram tile derived from the name; variant="mark" folds the wordmark away with the same motion a collapsing rail uses. With href the whole lockup is a home link.
Preview
Use the controls to explore the component's props.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
name (required) | string | — | Brand name. Labels the logo for AT (and the link, when href renders one), drives the default wordmark, and the monogram tile when no mark is given. |
mark | ReactNode | — | Custom mark — an inline SVG sized to fill its box. Wins over src. |
src | string | — | Image URL for the mark. Decorative — name labels the logo. Without mark or src, a monogram tile derived from name renders instead. |
wordmark | ReactNode | — | Wordmark content. Defaults to name. |
variant | "full" | "mark" | "full" | mark folds the wordmark away (width, opacity, slight x) and hides it from AT; the root keeps the accessible name. Reduced-motion aware. |
href | string | — | Renders the lockup as an anchor named by name — the usual "mark goes home" affordance. |
Example
import { Logo } from "@exegia/corpora-ui"
<Logo name="Corpora" href="/" mark={<BrandMark />} />
<Logo name="Corpora" variant="mark" /> // icon rail: mark onlyLast updated on
Tree
Nested item tree in four shapes: app navigation with collapsible sections, a table of contents, an icon rail, and an editable file explorer. Every row is a Button; navigation flows through onNavigate.
User
Identity pieces built on the atoms Avatar: User.Info is the avatar-plus-name row (role badge, optional description, audio ring) used by Bubble.Header and sidebar profiles; User.Pill is the compact mention chip.