message: flesh out StateLabel examples
diff: @@ -18,6 +18,8 @@ import ButtonPrimary from './ButtonPrimary'
  import ButtonSecondary from './ButtonSecondary'
  import ButtonDanger from './ButtonDanger'
  import Flash from './Flash'
  +import Octicon from '@github/octicons-react'
  +import StateLabel from './StateLabel'
  const Index = props => (
  <Page>
  @@ -236,6 +238,87 @@ const Index = props => (
  ))}
  </Flex>
  </Example>
  + <Example name='StateLabel'>
  + <Box mb={4}>
  + <Heading.h2 mb={1}>By state (Octicons built in)</Heading.h2>
  + <Box mb={2}>
  + <StateLabel>Unknown</StateLabel>
  + </Box>
  + <Box mb={2}>
  + <StateLabel state='open'>Opened</StateLabel>
  + </Box>
  + <Box mb={2}>
  + <StateLabel state='closed'>Closed</StateLabel>
  + </Box>
  + <Box mb={2}>
  + <StateLabel state='merged'>Merged</StateLabel>
  + </Box>
  + <Box mb={2}>
  + <StateLabel state='reopened'>Reopened</StateLabel>
  + </Box>
  + </Box>
  + <Box mb={4}>
  + <Heading.h2 mb={1}>By color</Heading.h2>
  + <Box mb={2}>
  + <StateLabel bg='invalid'>Invalid</StateLabel>
  + </Box>
  + <Box mb={2}>
  + <StateLabel bg='green'>Green</StateLabel>
  + </Box>
  + <Box mb={2}>
  + <StateLabel bg='red'>Red</StateLabel>
  + </Box>
  + <Box mb={2}>
  + <StateLabel bg='purple'>Purple</StateLabel>
  + </Box>
  + </Box>
  + <Box mb={4}>
  + <Heading.h2 mb={2}>Small, by state</Heading.h2>
  + <Box mb={2}>
  + <span className='mr-2'>
  + <StateLabel small>Unknown</StateLabel>
  + </span>
  + <span className='mr-2'>
  + <StateLabel small state='open'>Opened</StateLabel>
  + </span>
  + <span className='mr-2'>
  + <StateLabel small state='closed'>Closed</StateLabel>
  + </span>
  + <span className='mr-2'>
  + <StateLabel small state='merged'>Merged</StateLabel>
  + </span>
  + <span className='mr-2'>
  + <StateLabel small state='reopened'>Reopened</StateLabel>
  + </span>
  + </Box>
  + </Box>
  + <Box mb={4}>
  + <Heading.h2 mb={1}>Small, by color</Heading.h2>
  + <Box mb={2}>
  + <span className='mr-2'>
  + <StateLabel small bg='invalid'>Invalid</StateLabel>
  + </span>
  + <span className='mr-2'>
  + <StateLabel small bg='green'>Green</StateLabel>
  + </span>
  + <span className='mr-2'>
  + <StateLabel small bg='red'>Red</StateLabel>
  + </span>
  + <span className='mr-2'>
  + <StateLabel small bg='purple'>Purple</StateLabel>
  + </span>
  + <span className='mr-2'>
  + <StateLabel small bg='green'>
  + <span className='octicon'>
  + <Octicon name='git-branch'/>
  + </span>
  + {' '}
  + Custom Octicon
  + </StateLabel>
  + </span>
  + </Box>
  + </Box>
  + </Example>
  </Library>
  </KitProvider>
  </Page>
  