Skip to content

IssueKey

The project key and number of an issue in the monospace face. Pick it wherever an issue is named, and pass href when the key should open the issue.

  • IssueKey

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, IssueKey

SK-101SK-102SK-104

Dark theme, IssueKey

SK-101SK-102SK-104

High contrast theme, IssueKey

SK-101SK-102SK-104

UsageLink to the section Usage

tsx
import { IssueKey } from '@skribly/ui/tracker'
tsx
<IssueKey href="/issues/SK-101">SK-101</IssueKey>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

  • Plain text, or a React Aria link with a visible focus ring and a 24px tall target. translate="no" keeps page translators away from it. isClosed strikes it through, so say closed in words nearby as well, for example with a status badge.

This demo runs through axe in all three themes on every test run. See what the tests check.

Search this site

Arrows move through the results, Enter opens one, Esc closes. Ctrl K /