BranchName

BranchName is a link-type component rendered as a <span> element by default with monospace font and light-blue background as defined by the default theme. BranchName comes handy for displaying a branch name for a project you may be working on, similar to what you would come across on GitHub.

Default example

a_new_feature_branch
<BranchName>a_new_feature_branch</BranchName>

As a link example

<BranchName is='a' href='//github.com'>a_new_feature_branch_as_a_link</BranchName>

With an Octicon

Octicons are a set of SVG icons built by GitHub; they're cool. Learn more over here.

feature_branch_with_an_iconfeature_branch_with_an_icon
<Flex
    my='3'
    flexWrap='wrap'
    justifyContent='space-evenly'
    alignItems='center'
>
    <BranchName icon='git-branch'>feature_branch_with_an_icon</BranchName>
    <BranchName is='a' icon='git-branch' href='//github.com'>feature_branch_with_an_icon</BranchName>
</Flex>

System props

BranchName components get BACKGROUND, COMMON, TYPOGRAPHY and VARIANT system props. Read the System Props doc page for a full list of available props.

Component props

NameTypeDefaultDescription
isString<a>sets the HTML tag for the component
hrefStringa URL to link the component to
iconString / Iconpass-in an Octicon
schemeStringchange the color scheme. See theme's colorStyles for options.