<!-- source-hash: 6fb4d3c3dedfd71f1af226c49bd112fd -->
A client-side React button component that renders a vendor with its logo and title, supporting two visual variants and navigation to vendor profile pages.

## Key Components

### `VendorDisplayButtonProps`
| Prop | Type | Description |
|------|------|-------------|
| `vendor` | `VendorWithMedia` | Vendor data including slug, title, and media |
| `onClick` | `(vendorSlug: string) => void` | Optional internal click handler |
| `variant` | `'default' \| 'compact'` | Display style (defaults to `'default'`) |
| `externalUrl` | `string` | Fallback base URL for external navigation |

### `VendorDisplayButton`
Main export. Renders one of two button variants:
- **`default`** — Card-style button with an 8×8 logo container, used in standard listings
- **`compact`** — Pill-shaped button with a smaller 5×5 logo, designed for teaser/inline contexts (e.g. `flamingo-teaser`)

Logo display gracefully falls back to the vendor's initial character when no logo URL is available. External navigation uses `NEXT_PUBLIC_OPENMSP_URL` env variable with `externalUrl` as fallback, opening in a new tab.

## Usage Example

```typescript
import { VendorDisplayButton } from "./vendor-display-button"

// Default variant — navigates externally
<VendorDisplayButton
  vendor={vendorWithMedia}
  externalUrl="https://www.openmsp.ai"
/>

// Compact variant — triggers internal handler
<VendorDisplayButton
  vendor={vendorWithMedia}
  variant="compact"
  onClick={(slug) => router.push(`/vendors/${slug}`)}
/>
```