DotStatusColor

@coinbase/cds-web@8.38.5

Dots are component adornments, typically used to communicate a numerical value or indicate the status or identity of a component to the end-user.

import { DotStatusColor } from '@coinbase/cds-web/dots/DotStatusColor'

󰒨

Source

󰏖

Storybook

󰏖

Figma

󰕨

󰏖

View as Markdown

---

Related components

• DotCount,
• DotSymbol,
• Avatar

Sizes

Loading...

󰙡

Live Code

function Sizes() {
  const SIZES = ['xs', 's', 'm', 'l'];
  return (
    <VStack gap={2}>
      {SIZES.map((size) => (
        <VStack gap={1} key={`DotStatusColor-size-${size}`}>
          <DotStatusColor variant="negative" size={size} />
        </VStack>
      ))}
    </VStack>
  );
}

Variants

Loading...

󰙡

Live Code

function Variants() {
  const VARIANTS = ['positive', 'negative', 'primary', 'fgMuted', 'warning'];
  return (
    <VStack gap={2}>
      {VARIANTS.map((variant) => (
        <VStack gap={1} key={`DotStatusColor-variant-${variant}`}>
          <DotStatusColor variant={variant} />
        </VStack>
      ))}
    </VStack>
  );
}