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.

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

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[() => {}]

Animating button (Default)

Animating button - High contrast

Static button

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

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

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

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