StateLabel

StateLabel is used for rendering the status of an issue or pull request.

React

readyNot reviewed for a11y

Storybook|Source

Rails

readyNot reviewed for a11y

Docs|Lookbook|Source

Figma

View in Figma|

React examples

Default

Open

<StateLabel status="issueOpened">Open</StateLabel>

<StateLabel status="issueOpened">Open</StateLabel>

Status variants

Each status variant has an associated icon, selected based on the status type and whether it applies to an issue or pull request.

Issue statuses

DraftOpenClosedClosedUnavailable

Pull request statuses

DraftOpenMergedClosedUnavailable

<Stack>
  <div>
    <div>Issue statuses</div>
    <Stack direction="horizontal" align="center">
      <StateLabel status="issueDraft">Draft</StateLabel>
      <StateLabel status="issueOpened">Open</StateLabel>
      <StateLabel status="issueClosed">Closed</StateLabel>
      <StateLabel status="issueClosedNotPlanned">Closed</StateLabel>
      <StateLabel status="unavailable">Unavailable</StateLabel>
    </Stack>
  </div>


  <div>
    <div>Pull request statuses</div>
    <Stack direction="horizontal" align="center">
      <StateLabel status="draft">Draft</StateLabel>
      <StateLabel status="pullOpened">Open</StateLabel>
      <StateLabel status="pullMerged">Merged</StateLabel>
      <StateLabel status="pullClosed">Closed</StateLabel>
      <StateLabel status="unavailable">Unavailable</StateLabel>
    </Stack>
  </div>
</Stack>

<Stack>
  <div>
    <div>Issue statuses</div>
    <Stack direction="horizontal" align="center">
      <StateLabel status="issueDraft">Draft</StateLabel>
      <StateLabel status="issueOpened">Open</StateLabel>
      <StateLabel status="issueClosed">Closed</StateLabel>
      <StateLabel status="issueClosedNotPlanned">Closed</StateLabel>
      <StateLabel status="unavailable">Unavailable</StateLabel>
    </Stack>
  </div>

  <div>
    <div>Pull request statuses</div>
    <Stack direction="horizontal" align="center">
      <StateLabel status="draft">Draft</StateLabel>
      <StateLabel status="pullOpened">Open</StateLabel>
      <StateLabel status="pullMerged">Merged</StateLabel>
      <StateLabel status="pullClosed">Closed</StateLabel>
      <StateLabel status="unavailable">Unavailable</StateLabel>
    </Stack>
  </div>
</Stack>

Small size variant

DefaultSmall

<Stack direction="horizontal">
  <StateLabel status="issueOpened">Default</StateLabel>
  <StateLabel status="issueOpened" variant="small">
    Small
  </StateLabel>
</Stack>

<Stack direction="horizontal">
  <StateLabel status="issueOpened">Default</StateLabel>
  <StateLabel status="issueOpened" variant="small">
    Small
  </StateLabel>
</Stack>

Props

StateLabel

Name	Required	Description
variant		`'small' \| 'normal'`
status	Required	`'issueOpened' \| 'issueClosed' \| 'issueClosedNotPlanned' \| 'pullOpened' \| 'pullClosed' \| 'pullMerged' \| 'draft' \| 'issueDraft' \| 'unavailable'`
sx		`SystemStyleObject`