IconButton

Notes

A button for use with a single Icon. Please see Icon for further information.

Props

ariaLabelstring
aria-label applied to button.
highContrastbool
optional prop to allow button to be seen more easily on dark backgrounds
hrefstring
optional href for use if button is to be a link
iconClassstring
optional class applied to icon
pathoneOfType(string, arrayOf)
path of the icon to be used
sizestring['24px']
Size passed through to Icon child
tagNameoneOf('a', 'button')
Tag for this element can only be button or a, since this component is interactive.

<IconButton
  path={ iconPaths.directions }
  size='50px'
  ariaLabel='Directions'
/>

<IconButton
  path={ iconPaths.directions }
  size='50px'
  ariaLabel='Directions'
/>

<div className="mt2 p2 bg-houseGreen">
  <IconButton
    path={ iconPaths.close }
    highContrast
    ariaLabel='Close'
  />
</div>

<div className="mt2 p2 bg-houseGreen">
  <IconButton
    path={ iconPaths.close }
    highContrast
    ariaLabel='Close'
  />
</div>

CloseButton

Notes

A close button for use in modals, overlays, bottom sheets, and similar. Includes two alignment presets anchoring the button to the top right or top left of a relative container.

For more complex layouts, you can ignore the alignment prop to render the component without any positioning build in, allowing you to provide your own.

Props

alignmentoneOf('right', 'left')
Optional right or left alignment to pull the close button to the top right or top left edge of its container, using absolute positioning.
classNamestring
ariaLabelstring*
aria-label applied to button.
highContrastbool
optional prop to allow button to be seen more easily on dark backgrounds

<CloseButton ariaLabel='Close' />

<CloseButton ariaLabel='Close' />

<div className='relative p4'>
  <CloseButton alignment='right' ariaLabel='Close' />
</div>

<div className='relative p4'>
  <CloseButton alignment='right' ariaLabel='Close' />
</div>

<div className='relative p4'>
  <CloseButton alignment='left' ariaLabel='Close' />
</div>

<div className='relative p4'>
  <CloseButton alignment='left' ariaLabel='Close' />
</div>

<div className="p2 bg-houseGreen" >
  <CloseButton
    highContrast
    ariaLabel="Close"
  />
</div>

<div className="p2 bg-houseGreen" >
  <CloseButton
    highContrast
    ariaLabel="Close"
  />
</div>

HamburgerButton

Notes

A hamburger button for indicating there is a menu for opening and closing. When opened it animates to an X to indicate closing and when clicked in the open state it animates to the closed position (hamburger). This animation can be turned off by passing false with the animateToCloseOnClick prop.

Props

animateToCloseOnClickbool[true]
prop to allow users to turn off the animation, if desired.
classNamestring
closeButtonAriaLabelstring
aria-label applied to button in the open position, when it looks like an X.
highContrastbool
optional prop to allow button to be seen more easily on dark backgrounds.
menuButtonAriaLabelstring
aria-label applied to button in the closed position, when it looks like a hamburger.
hamburgerOpen[false]
onClick[() => {}]

Example: Animating button (Default)

<HamburgerButton
  menuButtonAriaLabel="Open Menu"
  closeButtonAriaLabel="Close"
/>

<HamburgerButton
  menuButtonAriaLabel="Open Menu"
  closeButtonAriaLabel="Close"
/>

Example: Animating button - High contrast

<div className="p2 bg-houseGreen" >
  <HamburgerButton
    highContrast
    menuButtonAriaLabel="Open Menu"
    closeButtonAriaLabel="Close"
  />
</div>

<div className="p2 bg-houseGreen" >
  <HamburgerButton
    highContrast
    menuButtonAriaLabel="Open Menu"
    closeButtonAriaLabel="Close"
  />
</div>

Example: Static button

<HamburgerButton
  animateToCloseOnClick={false}
  menuButtonAriaLabel="Open Menu"
/>

<HamburgerButton
  animateToCloseOnClick={false}
  menuButtonAriaLabel="Open Menu"
/>

FavoriteButton

Notes

A heart button used for favoriting items.

Props

classNamestring
ariaLabelstring*
aria-label applied to button.
highContrastbool
optional prop to allow button to be seen more easily on dark backgrounds

<FavoriteButton ariaLabel='Toggle Favorite' />

<FavoriteButton ariaLabel='Toggle Favorite' />

<div className="p2 bg-houseGreen" >
  <FavoriteButton
    highContrast
    ariaLabel="Toggle Favorite"
  />
</div>

<div className="p2 bg-houseGreen" >
  <FavoriteButton
    highContrast
    ariaLabel="Toggle Favorite"
  />
</div>

AddButton

Notes

A plus sign in a circle button used for adding items.

Props

classNamestring
ariaLabelstring*
aria-label applied to button.
highContrastbool
optional prop to allow button to be seen more easily on dark backgrounds

<AddButton ariaLabel='Add Item' />

<AddButton ariaLabel='Add Item' />

<div className="p2 bg-houseGreen">
  <AddButton
    highContrast
    ariaLabel="Add Item"
  />
</div>

<div className="p2 bg-houseGreen">
  <AddButton
    highContrast
    ariaLabel="Add Item"
  />
</div>

RemoveButton

Notes

A minus in a circle button used for removing items.

Props

classNamestring
ariaLabelstring*
aria-label applied to button.
highContrastbool
optional prop to allow button to be seen more easily on dark backgrounds

<RemoveButton ariaLabel='Remove Item' />

<RemoveButton ariaLabel='Remove Item' />

<div className="p2 bg-houseGreen" >
  <RemoveButton
    highContrast
    ariaLabel="Remove Item"
  />
</div>

<div className="p2 bg-houseGreen" >
  <RemoveButton
    highContrast
    ariaLabel="Remove Item"
  />
</div>

SocialMediaIconGroup

Notes

Icons available:

Facebook
Instagram
Pinterest
Spotify
Twitter
Youtube

To select the icons you want, send an object through linkItems props array.

...otherProps are sent to IconButton

Props

classNamestring['']
Applied to the <ul /> parent.
linkItems
arrayOf [
shape {
namestring*
urlstring*
ariaLabelstring
}
]
[[]]
Array of objects that maps to each icon. Each object needs a name, ariaLabel, and url. AriaLabel defaults to name if not provided.
listItemClassNamestring['']
Applied to the <li /> surrounding the IconButton

<SocialMediaIconGroup
  linkItems={[
    {
      name: 'facebook',
      ariaLabel: 'facebook icon',
      url: 'https://facebook.com/starbucks'
    },
    {
      name: 'instagram',
      ariaLabel: 'instagram icon',
      url: 'https://instagram.com/starbucks'
    },
    {
      name: 'twitter',
      ariaLabel: 'twitter icon',
      url: 'https://twitter.com/starbucks'
    },
    {
      name: 'spotify',
      ariaLabel: 'spotify icon',
      url: 'https://spotify.com/us/starbucks'
    },
    {
      name: 'youtube',
      ariaLabel: 'youtube icon',
      url: 'https://youtube.com/starbucks'
    },
    {
      name: 'pinterest',
      ariaLabel: 'pinterest icon',
      url: 'https://pinterest.com/starbucks'
    }
  ]}
/>

<SocialMediaIconGroup
  linkItems={[
    {
      name: 'facebook',
      ariaLabel: 'facebook icon',
      url: 'https://facebook.com/starbucks'
    },
    {
      name: 'instagram',
      ariaLabel: 'instagram icon',
      url: 'https://instagram.com/starbucks'
    },
    {
      name: 'twitter',
      ariaLabel: 'twitter icon',
      url: 'https://twitter.com/starbucks'
    },
    {
      name: 'spotify',
      ariaLabel: 'spotify icon',
      url: 'https://spotify.com/us/starbucks'
    },
    {
      name: 'youtube',
      ariaLabel: 'youtube icon',
      url: 'https://youtube.com/starbucks'
    },
    {
      name: 'pinterest',
      ariaLabel: 'pinterest icon',
      url: 'https://pinterest.com/starbucks'
    }
  ]}
/>

<div className="p2 bg-houseGreen">
  <SocialMediaIconGroup
    size="28px"
    listItemClassName="color-white"
    linkItems={[
      {
        name: 'facebook',
        url: 'https://facebook.com/starbucks'
      },
      {
        name: 'instagram',
        url: 'https://instagram.com/starbucks'
      },
      {
        name: 'twitter',
        url: 'https://twitter.com/starbucks'
      }
    ]}
  />
</div>

<div className="p2 bg-houseGreen">
  <SocialMediaIconGroup
    size="28px"
    listItemClassName="color-white"
    linkItems={[
      {
        name: 'facebook',
        url: 'https://facebook.com/starbucks'
      },
      {
        name: 'instagram',
        url: 'https://instagram.com/starbucks'
      },
      {
        name: 'twitter',
        url: 'https://twitter.com/starbucks'
      }
    ]}
  />
</div>