Wolf-Rayet, a design system that budgets attention

#Default

A menu is a group of items. It does not open itself.

import { ButtonItem, MenuGroup } from '@wolf-rayet/react';

<div style={{ inlineSize: 240, border: '1px solid var(--wr-border-subtle)', borderRadius: 8 }}>
  <MenuGroup>
    <ButtonItem>Assign to me</ButtonItem>
    <ButtonItem>Move to another queue</ButtonItem>
    <ButtonItem>Mark as resolved</ButtonItem>
  </MenuGroup>
</div>

#Sections and descriptions

Group items, and describe them where the label is not enough.

import { ButtonItem, LinkItem, MenuGroup, Section } from '@wolf-rayet/react';

<div style={{ inlineSize: 280, border: '1px solid var(--wr-border-subtle)', borderRadius: 8 }}>
  <MenuGroup>
    <Section title="Route to">
      <ButtonItem description="Answers in under a minute">Support bot</ButtonItem>
      <ButtonItem description="7 reps on shift">Human queue</ButtonItem>
    </Section>
    <Section title="Links">
      <LinkItem href="#">Routing documentation</LinkItem>
    </Section>
  </MenuGroup>
</div>

#States

An item can be selected or disabled.

import { ButtonItem, MenuGroup } from '@wolf-rayet/react';

<div style={{ inlineSize: 240, border: '1px solid var(--wr-border-subtle)', borderRadius: 8 }}>
  <MenuGroup>
    <ButtonItem isSelected>Billing</ButtonItem>
    <ButtonItem>Technical support</ButtonItem>
    <ButtonItem isDisabled>Archived queues</ButtonItem>
  </MenuGroup>
</div>