StateLabel

Use StateLabel components to show the status of an issue or pull request; StateLabel is a wrapper component for the Label and StateIssuePullRequest components.

Pro tip: The StateLabel component has been repurposed and wrapped with the @bristlecone/system sauce to extend Primer's original intent for this component, however, their respective component should be considered anytime you are looking to represent GitHub related pull request/issue state.

Default example

Issue OpenedIssue ClosedPull ClosedPull MergedPull Opened
<Flex
    my='1'
    flexDirection={{
        sm: 'column',
        md: 'column',
        lg: 'inherit'
    }}
    justifyContent='space-evenly'
    alignItems='center'
>
    <StateLabel m={1} status="issueOpened">Issue Opened</StateLabel>
    <StateLabel m={1} status="issueClosed">Issue Closed</StateLabel>
    <StateLabel m={1} status="pullClosed">Pull Closed</StateLabel>
    <StateLabel m={1} status="pullMerged">Pull Merged</StateLabel>
    <StateLabel m={1} status="pullOpened">Pull Opened</StateLabel>
</Flex>

Different sizes

Adjust label state sizes using the size prop; choose from small, medium, large, xlarge.

Small

Issue OpenedIssue ClosedPull ClosedPull MergedPull Opened
<Flex
    my='1'
    flexDirection={{
        sm: 'column',
        md: 'column',
        lg: 'inherit'
    }}
    justifyContent='space-evenly'
    alignItems='center'
>
    <StateLabel m={1} status="issueOpened" size="small">Issue Opened</StateLabel>
    <StateLabel m={1} status="issueClosed" size="small">Issue Closed</StateLabel>
    <StateLabel m={1} status="pullClosed" size="small">Pull Closed</StateLabel>
    <StateLabel m={1} status="pullMerged" size="small">Pull Merged</StateLabel>
    <StateLabel m={1} status="pullOpened" size="small">Pull Opened</StateLabel>
</Flex>

Large

Issue OpenedIssue ClosedPull ClosedPull MergedPull Opened
<Flex
    my='1'
    flexWrap='wrap'
    flexDirection={{
        sm: 'column',
        md: 'column',
        lg: 'inherit'
    }}
    justifyContent='space-evenly'
    alignItems='center'
>
    <StateLabel m={1} status="issueOpened" size="large" radius='large'>Issue Opened</StateLabel>
    <StateLabel m={1} status="issueClosed" size="large" radius='large'>Issue Closed</StateLabel>
    <StateLabel m={1} status="pullClosed" size="large" radius='large'>Pull Closed</StateLabel>
    <StateLabel m={1} status="pullMerged" size="large" radius='large'>Pull Merged</StateLabel>
    <StateLabel m={1} status="pullOpened" size="large" radius='large'>Pull Opened</StateLabel>
</Flex>

System props

StateLabel components get BACKGROUND, COMMON and FLEX_CONTAINER system props. In addition, it is an extension of the Label component and wraps the StateIssuePullRequest component. Read the System Props doc page for a full list of available props.

Component props

NameTypeDefaultDescription
sizeBooleanmediumUsed to create smallaller or larger versions of the default StateLabel. small, medium, large, xlarge are valid options
statusStringCan be one of issueOpened, issueClosed, pullOpened, pullClosed or pullMerged.
iconMrNumber1Used to apply marginal space to the right of the icon. Based on spacing list pre-defined in default theme. Note: you can use custom CSS in your app to get more specific with marginal space.