Sprout Social

Components

Partner logo

View on GitHub

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

NameTypeDefaultDescriptionRequired?
partnerNameTypePartnerNames
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'
heightstring
widthstring
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>