Components

Partner logo

Code

Partner logo is used to render logos for official partners in accordance with their brand standards.

Partner logo assets are stored in @sproutsocial/seeds-partner-logos. See the Getting Started guide for an example of how to attach sprites to the DOM.

All of our partner logo assets are synced from our shared Figma library. Designers with edit access in our Figma account can add/edit partner logos.

import { PartnerLogo } from '@sproutsocial/racine'

() => {
    const [selection, setSelection] = useState("messenger")
    const updateSelection = (e) => setSelection(e.target.value)

    return (
      <>
          <FormField
            label='Partners'
            id='partnerNames'
          >
            { props =>
              <Select
                defaultValue={selection}
                onChange={updateSelection}
                {...props}
              >
                {
                  partnerNames.map(partner => <option key={partner} value={partner}>{partner}</option>)
                }
              </Select>
            }
          </FormField>
          <Box display="flex" justifyContent="center" alignItems="center" width={1}>
            <Box mt={600}>
              <PartnerLogo partnerName={selection} size="jumbo" aria-label={`${selection} preview`} />
            </Box>
          </Box>
      </>
    )
  }

Properties

Name	Type	Description
`partnerName`	`TypePartnerNames`	The name of the partner whose logo you want to render.
`backgroundType`	`'dark'` `'light'`	Manually override the default mode behavior by rendering a logo based on the background it's displayed on.
`logoType`	`'wordmark'` `'lockup'`
`height`	`string`
`width`	`string`
`size`	`'mini'` `'small'` `'medium'` `'large'` `'jumbo'`

Recipes

Override

If you encounter light or dark backgrounds and need to override how the logo renders in your current theme's mode, you can use

<Box p={400} bg="black" display="flex" justifyContent="center" borderRadius={500}>
    <Box width={1/2}>
      <PartnerLogo partnerName="reddit" backgroundType="dark"  aria-label="Reddit Logo" />
    </Box>
  </Box>