BranchName

BranchName is a label-type component rendered as an <a> tag by default that displays the name of a branch.

React

readyNot reviewed for a11y

Storybook|Source

Figma

View in Figma|

React examples

Default

branch_name

<BranchName href="#">branch_name</BranchName>

<BranchName href="#">branch_name</BranchName>

Not a link

BranchName is rendered as a link by default. You can also represent the branch label in plain text.

branch_name

<BranchName>branch_name</BranchName>

<BranchName>branch_name</BranchName>

With a branch icon

Include the branch icon when using the component in isolation and in places where users can't easily determine whether the label represents a branch from the surrounding context.

branch_name

<BranchName href="#">
  <Stack direction="horizontal" gap="condensed" align="center">
    <GitBranchIcon />
    branch_name
  </Stack>
</BranchName>

<BranchName href="#">
  <Stack direction="horizontal" gap="condensed" align="center">
    <GitBranchIcon />
    branch_name
  </Stack>
</BranchName>

Props

BranchName

Name	Required	Description
ref		`React.RefObject<HTMLAnchorElement>`
as		`React.ElementType`
sx		`SystemStyleObject`