Skip to main content

Logo

Status: No dedicated documentation exists in design-system-docs (checked main + all open PRs, verified 2026-08-19). This is a factual scaffold, not real guidance — every qualitative section below is an explicit placeholder for a human writer. Nothing has been invented.

Source: DTSL/design-system → packages/product/@dtsl-react/src/components/atomic/Logo/types/Logo.types.ts (package @dtsl/react, exported as Logo)

Props (verbatim from source)​

export type LogoType =
	| 'sib'
	| 'icon-alone'
	| 'default'
	| 'brevoplus'
	| 'brevoplus-light'
	| 'wonderpush'

export interface LogoProps
	extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick'> {
	to?: string
	logo?: LogoType
	target?: string
	onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void
	ariaLabel?: string
	color?: string
	clickable?: boolean
	className?: string
	style?: React.CSSProperties
}

When to Use​

TODO — no existing UX/product guidance found in source, Storybook, or docs. Needs input from design/PM.

When NOT to Use​

TODO — needs UX/product input.

CRITICAL: Brand logo variant selection​

Possible business rule — LogoType includes brand-specific values (brevoplus, brevoplus-light, wonderpush, sib) alongside default/icon-alone. This strongly suggests brand-identity rules govern which variant is legitimate in which context. TODO — confirm the actual rules with brand/design; do not guess which contexts each variant is reserved for.

Decision Logic​

TODO — needs UX/product input on choosing between LogoType values.

Accessibility​

TODO — needs UX/product input. Note: ariaLabel prop exists and should presumably always be set since the rendered element is a link/anchor wrapping an image-like logo.

Common Mistakes​

TODO — needs UX/product input.