nili/ui
enfaartr
All components

PlaceholderLogo

Overview
14 exports2 variant axes6 props5 files
import { PlaceholderCompany, PlaceholderCompanyId, PlaceholderLogo, PlaceholderLogoVariant } from '@nili/ui';

This is the library’s own overview page, rendered live. Switch the language or the theme in the header and it follows.

The set

Nine fictional companies, each with a name, industry and location in PLACEHOLDER_COMPANIES — enough to fill a table without inventing a real brand you do not have the right to draw.

Apex Financial

Finance & Banking

Aurora Solutions

Environment

Catalyst Marketing

Sales & Marketing

Horizon Tutoring

Education

Orandis Tech

Technology

Phoenix Marketplace

E-commerce

Pulse Medical

Medical & Healthcare

Solaris Energy

Energy & Utilities

Synergy HR

Human Resources and Staffing

import { PlaceholderLogo, PLACEHOLDER_COMPANIES } from "@nili/ui"

export function Example() {
  return (
    <>
      {PLACEHOLDER_COMPANIES.map((company) => (
        <span key={company.id} className="flex items-center gap-2">
          <PlaceholderLogo company={company.id} size="md" label="" />
          {company.name}
        </span>
      ))}
    </>
  )
}

Sizes

Six sizes, matching the Avatar scale so a row of logos and a row of avatars line up.

xs
sm
md
lg
xl
2xl
import { PlaceholderLogo } from "@nili/ui"

export function Example() {
  return (
    <>
      <PlaceholderLogo company="apex-financial" size="xs" label="" />
      <PlaceholderLogo company="apex-financial" size="sm" label="" />
      <PlaceholderLogo company="apex-financial" size="md" label="" />
      <PlaceholderLogo company="apex-financial" size="lg" label="" />
      <PlaceholderLogo company="apex-financial" size="xl" label="" />
      <PlaceholderLogo company="apex-financial" size="2xl" label="" />
    </>
  )
}

Variants

Original keeps the brand colour; black and white are the monochrome marks — for a dark strip, a print sheet, or anywhere the colour would fight the surface.

original
black
white (on a dark surface)
import { PlaceholderLogo } from "@nili/ui"

export function Example() {
  return (
    <>
      <PlaceholderLogo company="apex-financial" variant="original" label="" />
      <PlaceholderLogo company="apex-financial" variant="black" label="" />
      <PlaceholderLogo company="apex-financial" variant="white" label="" />
    </>
  )
}

The empty tile

Omit company for the neutral disc — what you draw when a record genuinely has no logo, so a list of companies stays a grid of discs instead of collapsing where the data is missing.

import { PlaceholderLogo } from "@nili/ui"

export function Example() {
  return <PlaceholderLogo size="lg" label="No logo" />
}