Brand
brandCombines a square brand mark, name, and optional description with collapsed and router-link modes.
Usage
Basic usage
Square corner badge + site name. If mark is not passed, the first letter of the brand name (one Chinese character/English initial letter) will be automatically taken.
<Brand name="Hulian Backstage" />
<Brand name="hulian admin" />Custom badge · Subtitle · Color
mark connects to the icon/picture; description hangs a row of version or positioning; color changes the badge background color.
<Brand mark={<Logo />} name="Hulian" description="v0.18.0" />
<Brand name="Data Platform" color="chart-3" description="Internal System" />Three sizes · Collapsed state
sm Navigation bar / md Side bar / lg Login page brand area; omit name to only display the badge (used when the side bar is collapsed).
<Brand size="sm" name="Hulian" />
<Brand size="md" name="Hulian" />
<Brand size="lg" name="Hulian" />
<Brand mark={<Logo />} /> {/* Collapse */}Link back to home page
href uses ordinary links; render connects to frame routing components (react-router / next/link) to avoid SPA full page refresh.
<Brand name="Hulian" href="/" />
<Brand name="Hulian" render={<Link to="/" />} />When to use
Use Brand for the common square badge and site-name lockup found in the upper-left of a navigation bar, at the top of a sidebar, in a footer brand column, or on an authentication page.
Avatar is not a substitute: Avatar is circular and its sizes describe a circular diameter, while a brand badge needs squared corners and token-based rounding. Changing Avatar's shape through className would be a consumer-side patch (hulianui/hulian#57).
Import
import { Brand } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| mark | ReactNode | First character of name | Badge content such as an icon, image, or initial. |
| name | ReactNode | — | Brand name. Omit it to render only the badge in a collapsed sidebar. |
| description | ReactNode | — | One-line subtitle below the brand name, such as a version or positioning statement. |
| size | "sm" | "md" | "lg" | "md" | sm is a 28px navigation badge, md is a 36px sidebar badge, and lg is for authentication-page branding. |
| color | string | "primary" | Badge background. Accepts a semantic tone such as chart-3 or any CSS color. |
| href | string | — | Native link target, normally the home page. |
| render | ReactElement | — | Renders through a framework router element such as <Link to="/" />, following the Button, Link, and NavMenuItem render contract. |
| className | string | — | Class name for the root; remaining native attributes are forwarded. |
Example
// Navigation bar
<Brand size="sm" mark={<Logo />} name="Hulian Admin" render={<Link to="/" />} />
// Sidebar: retain only the badge when collapsed
<Brand mark={<Logo />} name={collapsed ? undefined : "Hulian Admin"} />
// Authentication page
<Brand size="lg" name="Hulian Admin" description="v0.18.0" />Usage guidelines
- When `name` is present, the badge is decorative and receives
aria-hidden; the name supplies the accessible identity. In a mark-only collapsed state, makemarkmeaningful or provide anaria-labelon the root. - The badge uses
--color-primary-foregroundover its background. Check contrast when supplying a custom mid-luminance color. - Pass a brand image through
mark={<img ... />}. The component already appliessize-full object-cover, so do not add another size wrapper.
Related
Avatar · Navbar · NavMenu · AdminLayout · BeianFooter · LoginForm
Playground
<Brand
name="Hulian Backstage"
/>