Checkatrade Logo

Marks

Two marks are available: the full wordmark (full, default) and the square “CAT” mark (icon).

<CheckatradeLogo />

<CheckatradeLogo mark="icon" />

Sizes

Three sizes are available. The default is md.

<div className="flex items-end gap-6 flex-wrap">
<CheckatradeLogo size="sm" label="Checkatrade (sm)" />
<CheckatradeLogo size="md" label="Checkatrade (md)" />
<CheckatradeLogo size="lg" label="Checkatrade (lg)" />
</div>

Bounded responsive sizing

Pass same-axis minWidth/maxWidth alongside style.width (or minHeight/maxHeight alongside style.height) to clamp a fluid dimension while proportions keep following the locked aspect ratio. Supported on both web and native (the live example below renders the web component).

<div style={{ width: 300 }}>
<CheckatradeLogo style={{ width: '100%', minWidth: 120, maxWidth: 400 }} label="Checkatrade (bounded)" />
</div>

Surface-aware inverse

On any non-neutral Surface tone the reversed (white) variant is applied automatically. No extra prop is needed.

<Surface tone="inverse" className="rounded-lg p-6">
<CheckatradeLogo label="Checkatrade" />
</Surface>

When to use

Use CheckatradeLogo whenever you need to display the Checkatrade brand mark. Choose full (wordmark) as the default and reserve icon (square mark) for contexts where space is limited and the brand is already established.

Marks

• full — the full horizontal wordmark. Use as the primary representation: headers, footers, marketing pages.
• icon — the compact square “CAT” mark. Use in tight spaces: favicons, app icons, compact navigation.

Sizes

Sizes are provisional pending design sign-off.

Inverse / Surface tones

The CheckatradeLogo component reads the surrounding Surface tone via React context. On any non-neutral tone (inverse, brand-primary, brand-secondary) it automatically renders the reversed (white) variant. Use the explicit inverse prop only when you need the reversed mark outside of a Surface.

Accessibility

• By default, label is 'Checkatrade', exposing the mark as an image with that accessible name.
• Pass label={null} when the logo is purely decorative — for example, when a visible text heading already reads “Checkatrade” immediately alongside it. The mark will be hidden from assistive technology.

When not to use

• Icons from the icon set: use the Icon component.
• Illustrations: use a plain <img> or the Illustration component.
• Custom partner or co-brand marks: use a plain <img> with an appropriate alt attribute.

Style constraints

LogoStyle is an intentional whitelist — only sizing, margin, and positioning props are exposed. Visual properties (colour, opacity, transform, border, shadow) are excluded by design: the brand mark must remain visually unchanged. If you need to apply a visual treatment around the logo, wrap it in a View.

Props

Web props

Responsive sizing props

Both the web and native CheckatradeLogo support a responsive style sizing API, available on the wordmark (mark="full", the default) only — the square icon mark uses the fixed size presets. size and style are mutually exclusive — use one or the other.

Import

Web

import { CheckatradeLogo } from '@checkatrade/components-web';

Native

import { CheckatradeLogo } from '@checkatrade/components-native';

Basic usage

{
  /* Default wordmark, labelled */
}
<CheckatradeLogo />;

{
  /* Square mark */
}
<CheckatradeLogo mark="icon" />;

{
  /* Explicit size */
}
<CheckatradeLogo size="lg" />;

{
  /* Decorative — hidden from assistive technology */
}
<CheckatradeLogo label={null} />;

Inverse on a dark surface

{
  /* Automatic via Surface context — no prop needed */
}
<Surface tone="inverse" className="p-6">
  <CheckatradeLogo />
</Surface>;

{
  /* Manual inverse without a Surface */
}
<div
  style={{
    background: 'var(--color-background-surface-brand-primary-default)',
    padding: '1rem',
  }}
>
  <CheckatradeLogo inverse />
</div>;

Responsive sizing

Both the web and native CheckatradeLogo support a style prop for responsive and custom-sized layouts.

{
  /* Fill the parent container width, height auto */
}
<CheckatradeLogo style={{ width: '100%' }} />;

{
  /* Fixed height with a top margin */
}
<CheckatradeLogo style={{ height: 40, marginTop: 16 }} />;

{
  /* Fixed width with horizontal margins (wordmark) */
}
<CheckatradeLogo style={{ width: 240, marginHorizontal: 12 }} />;

{
  /* Fluid width clamped between 120px and 400px — proportions hold throughout */
}
<CheckatradeLogo style={{ width: '100%', minWidth: 120, maxWidth: 400 }} />;

Consumer requirement (native): add expo-image (peer >=3) to your app or package. Keep .svg files in Metro’s default assetExts — do not route .svg through react-native-svg-transformer.

Platform status

Accessibility

Web

• Decorative logos set aria-hidden="true" and role="presentation" — completely invisible to assistive technology.
• Labelled logos set role="img" and aria-label from the label prop (defaults to 'Checkatrade').
• The SVG inherits dimensions via an inline height style; width is auto to preserve the mark’s intrinsic aspect ratio.

React Native

• See the native CheckatradeLogo component for accessibility details on mobile.

No releases yet.