HomeStarbucks Pattern Library

Button

Notes

This component renders button tags by default or a if href is provided. It also supports an arbitrary tagName prop for advanced usage, which can support HTML tag names or React components like Link.

Props

  • classNamestring
  • childrennode
  • coloroneOf('gold', 'black', 'white', 'houseGreen')
  • hrefstring

    The href of the link

  • loadingbool

    If true, it shows a loading animation inside the button. Not shown if it's a text-only or text link button or if the button is disabled.

  • visualStyleoneOf('default', 'positive', 'textLink', 'textOnly')

    The visual style of the button.

  • tagNameany

    An optional HTML tagname or React component for the rendered element. This should generally be button or a, unless there's a good reason to make it a non-interactive element. Defaults to button, or a if an href is present.

  • typeoneOf('button', 'reset', 'submit')

    An HTML button type attribute. Only applied if the tagName is button or input.

  • interactivebool

Example: Default Buttons

Example: Filled (or Positive) Buttons

Example: Text-only Buttons

Example: Themed Buttons

Example: Text link Buttons

ButtonKit

Notes

Provides a container for up to 2 buttons, implemented primarily for a Confirm/Cancel button model.

Props

  • confirmTextnode

    Provides display text for and enables the primary button. (right-most button when two buttons are used)

  • onConfirmfunc

    If given, provides the onClick action for the primary button. Takes precedence over the confirmHref prop, if both are given.

  • confirmHrefstring

    An alternate to the onConfirm action. If given, provides a link to a location for a primary button click. If onConfirm prop is also given, it will take precedence over the given href.

  • confirmPropsobject

    Optional primary button props

  • cancelTextnode

    Provides display text for and enables the secondary button. (left-most when two buttons are used)

  • onCancelfunc

    If given, provides the onClick action for the secondary button. Takes precedence over the cancelHref prop, if both are given.

  • cancelHrefstring

    An alternate to the onCancel action. If given, provides a link to a location for a secondary button click. If onCancel prop is also given, it will take precedence over the given href.

  • cancelPropsobject

    Optional secondary button props

  • classNamestring['']

    Augments the default button container className.

Example: Both Confirm and Cancel Buttons

Example: Confirm Button Only

Example: Cancel Button Only (with an optional cancel prop)

Example: Confirm Button with TextOnly Cancel Button

Example: Both Buttons with Lengthy Text (as if French)

Example: Both Buttons with Customizations