AppLogo

A product's mark, at a known size, that is never an empty box. It draws an image, an inline SVG, a letter on a tile, or (with nothing else to go on) the product's name set as the logotype.

import { AppLogo } from 'neba';

<AppLogo name="Neba" src="/logo.svg" />;

Props

Prop	Type	Default	Description
children	ReactNode	—	The artwork as markup: an inline svg, usually. It beats src: a mark that is part of the document takes the page's own colours, needs no second request, and cannot arrive late
src	string	—	The artwork as an image. A logo file very often has the product's name set into it, which is what shape="bare" is the default for and why name is read out rather than drawn a second time
srcSet	string	—	Candidate images at other resolutions, as on any img
name	string	—	The product's name. One prop doing three jobs: it names the artwork, it is drawn as the logotype when there is no artwork at all, and its initials are what a tile falls back to
alt	string	name	What the artwork says for a reader who cannot see it. Almost always name, since a logo means the product
initials	string	name에서 유도	The letters on a tile, written out
showName	boolean	false	Draws the name beside the artwork. What is drawn *is* the accessible name from then on, so the name stops being read out twice
shape	'bare' | 'app' | 'circle'	'bare'	How the artwork is framed. bare draws it as it was given: no plate, no crop, no padding; app is an app icon, a filled tile with the artwork inset and the corners cut off; circle is the same tile, round
variantshared	'solid' | 'outline' | 'text'	'solid'	Weight of the tile behind the artwork. Nothing at all on bare, which draws no tile
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	How tall the mark is: the control heights, so a logo and the button beside it in a header are the same height. On bare only the height is set and the width follows the artwork's own proportions
colorshared	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	Semantic colour role. Arbitrary colour values are not accepted
densityshared	'default' | 'compact'	'default'	Padding only: never the height, never the type scale
elevationshared	0 | 1 | 2 | 3	0	Drop shadow depth. 0 means no shadow at all
padded	boolean	true	Insets the artwork from the tile's edge, the way an app icon's glyph is. Turn it off for a mark drawn to fill the tile: a favicon, a photograph
height	number | string	—	An exact height, overriding size. Numbers are pixels: a brand's artwork is drawn at a height somebody chose, and rounding it to the nearest step of a ladder is how a logo ends up half a pixel off the type beside it
href	string	—	Makes the whole lockup a link. A logo in a header is nearly always the way back to the front page
imageProps	Omit<ComponentPropsWithoutRef<'img'>, 'src' | 'srcSet' | 'alt'>	—	Anything else the img needs: loading, decoding, crossOrigin
render	useRender.RenderProp	—	Renders something other than a div (render={<h1 />}). Base UI's own escape hatch

Every native <a> attribute passes through, apart from color. The shared axes are described under prop conventions.

The artwork is children if there is any, otherwise src, otherwise the name. Without an href it renders a <span>.

Examples

src · children

Where the artwork comes from. src links a file (a PNG, an SVG, whatever the brand ships), and children takes the markup instead, which is what an inline <svg> needs in order to inherit the colour around it. children wins when both are given, so one component serves a project that links a file and a project that inlines its icon. With neither, the tile falls back to the initials of name.

import { AppLogo } from 'neba';

function Mark() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M4 18V7l8 10 8-10v11" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

export default function AppLogoArtwork() {
  return (
    <div className="flex flex-wrap items-center gap-8">
      {/* A file, drawn as it came. */}
      <AppLogo name="Acme Compass" src="/samples/logos/compass.png" size="lg" />
      <AppLogo name="Acme Stack" src="/samples/logos/layered-stack.png" size="lg" />

      {/* Markup, which takes the colour around it. */}
      <AppLogo name="Neba" size="lg">
        <Mark />
      </AppLogo>
      <AppLogo name="Neba" size="lg" shape="app">
        <Mark />
      </AppLogo>

      {/* Neither, so the name's initials stand in. */}
      <AppLogo name="Acme Corp" size="lg" shape="app" variant="outline" />
    </div>
  );
}

shape

How the artwork is framed. bare (the default) draws it as it was given, at the height size asks for and whatever width that comes to: no plate, no crop, no padding. app insets it into a filled tile with the corners cut off, and circle is the same tile, round. padded={false} lets a mark reach the tile's own edges.

bare is the default because a logo file very often has a background, a margin or the product's name set into it, and a square crop would eat all three.

import { AppLogo } from 'neba';

function Mark() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M4 18V7l8 10 8-10v11" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

export default function AppLogoShape() {
  return (
    <div className="flex flex-wrap items-center gap-8">
      <AppLogo name="Neba" size="lg">
        <Mark />
      </AppLogo>
      <AppLogo name="Neba" size="lg" shape="app">
        <Mark />
      </AppLogo>
      <AppLogo name="Neba" size="lg" shape="circle">
        <Mark />
      </AppLogo>
      <AppLogo name="Neba" size="lg" shape="app" padded={false}>
        <Mark />
      </AppLogo>
    </div>
  );
}

name

With no artwork at all the name is the mark: the logotype on a bare logo, and its initials on a tile. initials writes those letters out when the derived ones are wrong.

import { AppLogo } from 'neba';

function Mark() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M4 18V7l8 10 8-10v11" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

export default function AppLogoName() {
  return (
    <div className="flex flex-col gap-5">
      <AppLogo name="Neba Studio" />
      <AppLogo name="Neba Studio" shape="app" />
      <AppLogo name="Neba Studio" shape="app" showName />
      <AppLogo name="Neba Studio" shape="circle" showName initials="NS">
        <Mark />
      </AppLogo>
    </div>
  );
}

showName

Draws the name beside the mark, as the words half of a lockup. Off by default, because the common case is a file that already says the name. What is drawn becomes the accessible name from then on, so nothing is read out twice.

variant · color

The weight of the tile behind the artwork, and the family it takes. Neither does anything on bare, which draws no tile.

import { AppLogo } from 'neba';

export default function AppLogoVariant() {
  return (
    <div className="flex flex-wrap items-center gap-8">
      <AppLogo name="Acme Corp" shape="app" size="lg" />
      <AppLogo name="Acme Corp" shape="app" size="lg" variant="outline" color="info" />
      <AppLogo name="Acme Corp" shape="app" size="lg" variant="text" color="success" />
    </div>
  );
}

href · height · render

href makes the whole lockup a link, which is what a logo in a Header nearly always is. A target that leaves this tab gets rel="noopener noreferrer" merged into whatever rel you wrote. height overrides size with an exact number of pixels or a CSS length. render changes the element: render={<h1 />} for the one page where the product's name is the page's heading, or a router's own link component.

import { AppLogo } from 'neba';

function Mark() {
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M4 18V7l8 10 8-10v11" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

export default function AppLogoLink() {
  return (
    <div className="flex flex-wrap items-center gap-8">
      <AppLogo name="Neba" href="/" shape="app" showName>
        <Mark />
      </AppLogo>
      <AppLogo name="Neba" render={<h1 />} size="xl" />
      <AppLogo name="Neba" height={56} shape="app">
        <Mark />
      </AppLogo>
    </div>
  );
}

Accessibility

• The name is in the document exactly once. A drawn name is the accessible name; an image carries it as alt; a mark made of markup or of initials is marked decorative and the name is kept in a clipped span beside it.
• alt overrides what the artwork says, for the rare logo that means something other than the product.
• With href, the link's accessible name is the product's, so a logo that is the way home needs nothing else written on it.