Logo Strip Badge
Powering teams at
A trusted by logo strip badge with grayscale logos that regain color on hover.
The import and the props worth knowing about, in one place.
import { Badge20 } from "@/components/beste/component/badge20";
<Badge20
label="Trusted by"
logos={[
{ src: "/logos/acme.svg", alt: "Acme" },
{ src: "/logos/globex.svg", alt: "Globex" },
{ src: "/logos/initech.svg", alt: "Initech" },
]}
/>
<Badge20
logos={[{ src: "/logos/acme.svg", alt: "Acme" }]}
height={32} // logo height in px (default 24)
grayscale={false} // full-color logos
tone="foreground" // label color: "muted" (default) | "foreground"
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Badge20 } from "@/components/beste/component/badge20";
<Badge20
label="Powering teams at"
logos={[{"src":"https://oud.pics/sm/l/npm.svg","alt":"npm"},{"src":"https://oud.pics/sm/l/pnpm.svg","alt":"pnpm"},{"src":"https://oud.pics/sm/l/yarn.svg","alt":"Yarn"},{"src":"https://oud.pics/sm/l/bun.svg","alt":"Bun"}]}
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Muted intro text before the logos (e.g. "Trusted by") |
logos* | Badge20Logo[] | — | The logos |
height | number | — | Logo height in pixels |
grayscale | boolean | — | Render logos grayscale at reduced opacity (color on hover) |
tone | "muted" | "foreground" | — | Label color |
className | string | — | Additional classes merged onto the root |
A decorative barcode badge with a monospace caption for editorial and print inspired sections.
A tag group badge that renders wrapping chips for services, skills, and topics.
A marker highlight badge that draws a highlighter stroke behind key words in headlines.
An announcement pill badge with a bold tag, message, and optional link arrow for hero sections.