Sprout Social

Components

Button

View on GitHub

Button is used to trigger actions based on a user's interaction.

Best Practices

  • Button text should be written in sentence case
  • Avoid using multiple Primary buttons in a workflow
  • A button containing no text should be paired with a label or tooltip
  • Common button actions should be placed in a similar location from flow to flow, .e.g. “Export Report”, “Save Changes”, etc…
  • Don’t override default font size, space or color theme values (unless using the Unstyled button type)
  • Behind the scenes, Button can function as an anchor or button, in both cases, the styling remains the same. If you need a Button that looks like an anchor, use the Link component.

Button Types

Unstyled

Unstyled is minimally themed, with no set background or foreground styles. Use this style for things that either don’t need a lot of styling (e.g. “Cancel” action in modals) or need custom styling.

Primary

Primary buttons are used for highlighting important actions within a page or workflow. Use Primary sparingly, as overuse can cause confusion to a user.

Secondary

Secondary is intended for general use buttons and actions like triggering popouts, filtering and sharing actions. This is typically the most appropriate button type because of its neutral visual weight.

Destructive

This type of button can be used to warn a user of potentially destructive actions such as removing a profile, deleting a message from a network or abandoning an unsaved workflow.

Placeholder

Placeholder can be used for adding a subtle action without affecting the hierarchy of a workflow.

Pill

Pill buttons are generally used for things like interactive Icons, navigation and message bubble actions.

Active State

The button component has an optional active state which allows the “active” button state to be enabled without user interaction. Use the active state to associate a button with a related element, such as an open popout.