Skip to contentWolf-Rayet

Object

An object is an icon that represents a content type.

Install

One package and one stylesheet. The stylesheet carries the tokens every component reads.

pnpm add @wolf-rayet/react
import '@wolf-rayet/react/css/wolf-rayet.css';
import { ObjectIcon } from '@wolf-rayet/react';

Props

A required prop is marked with an asterisk.

PropTypeDefaultDescription
type'story' | 'bug' | 'epic' | 'task''task'The content type. Each has its own colour and glyph, and the pairing should stay fixed across the product.
label *string—Names the type for a screen reader, as in Bug. Required, because the glyph is the only other carrier.

Accessibility

What the component does for you, and what it needs from you.

  • The label names the type and is required, because the glyph and its colour are the only other signals.
  • Colour separates the four types, so the label carries the meaning for anyone who cannot use it.
  • In a list of one type, drop the icon rather than repeating it on every row.