SpotSquare

@coinbase/cds-web@9.28.0

A square-shaped illustration component for displaying spot graphics.

import { SpotSquare } from '@coinbase/cds-web/illustratations/SpotSquare'

󰒨

Source

󰏖

Storybook

󰏖

Changelog

󰏖

Figma

󰕨

󰏖

View as Markdown

---

Related components

• SpotIcon,
• SpotRectangle,
• HeroSquare,
• Pictogram

Illustrations

󰝈

dimension prop:

96x96

Basic example

Loading...

󰙡

Live Code

<SpotSquare name="yieldCenterUSDC" />

scaleMultiplier prop

If no predefined dimensions fit your use case, you can use the scaleMultiplier prop to scale the illustration.

Use scaleMultiplier sparingly and with caution. We have predefined dimensions to ensure that illustrations scale elegantly.

Loading...

󰙡

Live Code

<SpotSquare name="yieldCenterUSDC" scaleMultiplier={1.5} />

Scaling with dimension

If dimension and scaleMultiplier are both provided the component will scale based on the provided dimension.

Loading...

󰙡

Live Code

<SpotSquare name="yieldCenterUSDC" dimension="120x120" scaleMultiplier={1.5} />

Theming

Use the applyTheme prop to enable dynamic theming. When set, the illustration is inlined into the page and colored by the active ThemeProvider's illustration palette.

Loading...

󰙡

Live Code

<SpotSquare applyTheme name="yieldCenterUSDC" />

To apply a custom brand palette, set lightIllustrationColor and darkIllustrationColor on your theme:

Loading...

󰙡

Live Code

function ThemedSpotSquare() {
  const customTheme = {
    ...defaultTheme,
    lightIllustrationColor: {
      ...defaultTheme.lightIllustrationColor,
      primary: 'rgb(220, 38, 38)',
      accent1: 'rgb(124, 58, 237)',
    },
    darkIllustrationColor: {
      ...defaultTheme.darkIllustrationColor,
      primary: 'rgb(248, 113, 113)',
      accent1: 'rgb(167, 139, 250)',
    },
  };

  return (
    <ThemeProvider activeColorScheme="light" theme={customTheme}>
      <SpotSquare applyTheme name="yieldCenterUSDC" />
    </ThemeProvider>
  );
}