# Logo mark

> One customer logo, with an optional link. Logos get the same visual height, and the company name is available to screen readers.

Facade UI item `logo-mark` (ui, atom).
Docs page: https://facadeui.dev/components/logo-mark · Registry JSON: https://facadeui.dev/r/logo-mark.json

## Install

```bash
npx shadcn@latest add @facade/logo-mark
```

Or by URL: `npx shadcn@latest add https://facadeui.dev/r/logo-mark.json`. The CLI also installs what it needs: @facade/types, @facade/utils.

Files: `components/ui/logo-mark.tsx`

Usage example as an installable item: `npx shadcn@latest add @facade/logo-mark-demo` (lands in components/examples/).

## Usage

The source of the preview on the docs page. `./content` holds sample data.

```tsx
import { LogoMark } from "@/components/ui/logo-mark"

const logos = ["Northwind", "Contoso", "初音 Labs", "Umbrella", "Globex"]

export function Demo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-x-10 gap-y-6">
      {logos.map((name) => (
        <LogoMark key={name} name={name} />
      ))}
    </div>
  )
}
```

## Props

### LogoMarkProps

Extends LogoItem.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `image` | `ImageComponent` |  | Your image component, such as `next/image`. Defaults to `"img"`. |
| `link` | `LinkComponent` |  | Your link component, such as `next/link`. Defaults to `"a"`. |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Height in px. The width keeps the logo's proportions. |
| `muted` | `boolean` | `true` | Shows the logo in grey until hover or focus. Default `true`. |
| `showName` | `boolean` | `false` | Shows the name as visible text instead of hiding it. |
| `className` | `string` |  |  |