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. Buttons must always use sentence case (no ALL CAPS or Title Case) and we enforce this in CSS via text-transform property.

Props

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

    A function to access the Button DOM node's ref. See https://facebook.github.io/react/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components for details.

  • hrefstring
  • 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')['default']

    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')['button']

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

  • interactivebool[true]

Default Buttons

Default Buttons

Text-only Buttons

Themed Buttons

Buttons nested in ThemeContext.Provider components will change automatically. The markup for the buttons in each of the following examples is identical, only the Theme provider wrapping the buttons is different.

Default theme

Dark theme

Rewards theme

Text link Buttons

The textLink visual style makes the buttons look like text links

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.

Both Confirm and Cancel Buttons

Confirm Button Only

Cancel Button Only (with an optional cancel prop)

Confirm Button with TextOnly Cancel Button

Done

Both Buttons with Lengthy Text (as if French)

Both Buttons with Customizations