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"
/>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 |