StateIssuePullRequest

Use the StateIssuePullRequest component to show an appropriate Octicon for any given issue or pull request based on a status, or for representing another state-purpose in your project. For an Issue/Pull Request Octicon, like below, with a corresponding colored background, see StateLabel.

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

Default example

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

Different sizes example

Small

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

Large

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

X-Large

Issue Opened
Issue Closed
Pull Closed
Pull Merged
Pull Opened
<Flex
    my='1'
    overflowX='scroll'
    flexDirection={{
        sm: 'column',
        md: 'column',
        lg: 'inherit'
    }}
    justifyContent='space-evenly'
    alignItems='center'
>
    <StateIssuePullRequest m={2} status="issueOpened" size='xlarge'>Issue Opened</StateIssuePullRequest>
    <StateIssuePullRequest m={2} status="issueClosed" size='xlarge'>Issue Closed</StateIssuePullRequest>
    <StateIssuePullRequest m={2} status="pullClosed" size='xlarge'>Pull Closed</StateIssuePullRequest>
    <StateIssuePullRequest m={2} status="pullMerged" size='xlarge'>Pull Merged</StateIssuePullRequest>
    <StateIssuePullRequest m={2} status="pullOpened" size='xlarge'>Pull Opened</StateIssuePullRequest>
</Flex>

System props

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

Component props

NameTypeDefaultDescription
sizeBooleansmallUsed to create smaller or larger versions of the default StateIssuePullRequest. small, medium, large, xlarge are valid options
statusStringCan be one of issueOpened, issueClosed, pullOpened, pullClosed or pullMerged.