RefBadge
A branch, remote branch, tag or the current HEAD, on its own, such as in a header or a release list.
- RefBadge
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, RefBadge
Current branch mainBranch feature/quick-openRemote branch origin/mainTag v0.4.0Branch feature/a-branch-name-that-goes-on-for-much-longer-than-the-badge
Dark theme, RefBadge
Current branch mainBranch feature/quick-openRemote branch origin/mainTag v0.4.0Branch feature/a-branch-name-that-goes-on-for-much-longer-than-the-badge
High contrast theme, RefBadge
Current branch mainBranch feature/quick-openRemote branch origin/mainTag v0.4.0Branch feature/a-branch-name-that-goes-on-for-much-longer-than-the-badge
UsageLink to the section Usage
import { RefBadge } from '@skribly/ui/code'<RefBadge kind="branch">feature/quick-open</RefBadge>
<RefBadge kind="remote" kindLabel={t('git.remote')}>origin/main</RefBadge>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
- Each kind has its own glyph as well as its colour, and the kind can be read before the name.
- Long names are cut on screen and stay whole for screen readers.
- A border shows in forced colours.
This demo runs through axe in all three themes on every test run. See what the tests check.