StatusLight

Status lights are used to color code categories and labels commonly found in data visualization. When status lights have a semantic meaning, they should use semantic variant colors.

Variants

The status light features several variants to convey various meanings.

<StatusLight variant='positive'>Positive</StatusLight>
<StatusLight variant='negative'>Negative</StatusLight>
<StatusLight variant='notice'>Notice</StatusLight>
<StatusLight variant='info'>Info</StatusLight>
<StatusLight variant='neutral'>Neutral</StatusLight>

<StatusLight variant='positive'>Positive</StatusLight>
<StatusLight variant='negative'>Negative</StatusLight>
<StatusLight variant='notice'>Notice</StatusLight>
<StatusLight variant='info'>Info</StatusLight>
<StatusLight variant='neutral'>Neutral</StatusLight>

<StatusLight variant="positive">
  Positive
</StatusLight>
<StatusLight variant="negative">
  Negative
</StatusLight>
<StatusLight variant="notice">
  Notice
</StatusLight>
<StatusLight variant="info">
  Info
</StatusLight>
<StatusLight variant="neutral">
  Neutral
</StatusLight>

Sizes

The status light comes in several sizes to fit different use cases.

<StatusLight size="xsmall">
  <Text size="xsmall">Extra small</Text>
</StatusLight>
<StatusLight size="small">
  <Text size="small">Small</Text>
</StatusLight>
<StatusLight size="medium">
  <Text size="medium">Medium</Text>
</StatusLight>
<StatusLight size="large">
  <Text size="large">Large</Text>
</StatusLight>
<StatusLight size="xlarge">
  <Text size="xlarge">Extra large</Text>
</StatusLight>

<StatusLight size="xsmall">
  <Text size="xsmall">Extra small</Text>
</StatusLight>
<StatusLight size="small">
  <Text size="small">Small</Text>
</StatusLight>
<StatusLight size="medium">
  <Text size="medium">Medium</Text>
</StatusLight>
<StatusLight size="large">
  <Text size="large">Large</Text>
</StatusLight>
<StatusLight size="xlarge">
  <Text size="xlarge">Extra large</Text>
</StatusLight>

<StatusLight size="xsmall">
  <Text size="xsmall">
    Extra small
  </Text>
</StatusLight>
<StatusLight size="small">
  <Text size="small">
    Small
  </Text>
</StatusLight>
<StatusLight size="medium">
  <Text size="medium">
    Medium
  </Text>
</StatusLight>
<StatusLight size="large">
  <Text size="large">
    Large
  </Text>
</StatusLight>
<StatusLight size="xlarge">
  <Text size="xlarge">
    Extra large
  </Text>
</StatusLight>

Role

The status light will automatically show a tooltip if it's used as a 'marquee'.

<StatusLight role="marquee" size="medium">
  <Text>Label goes to the tooltip</Text>
</StatusLight>

<StatusLight role="marquee" size="medium">
  <Text>Label goes to the tooltip</Text>
</StatusLight>

<StatusLight
  role="marquee"
  size="medium"
>
  <Text>
    Label goes to the
    tooltip
  </Text>
</StatusLight>

Accessibility

If the status light does not include a textual label a aria-label or aria-labelledby prop need to be provided to support assistive technology such as screen readers.

In order to support internationalization, provide a localized string to the children or aria-label prop.

API