Skip to main content

Button

Buttons indicate actions that users can take, such as adding an item to the cart, submitting a form, and proceeding with an operation.

Import​

import { Button } from '@faststore/ui'

Usage​

Loading...

Use cases​

Use the Button component to communicate user actions on the following components:

  • Buy-now and add-to-cart buttons on Product Cards
  • Call-to-action buttons on Cards
  • Submit and/or withdraw actions on Forms
  • Submit and/or withdraw actions on Modal windows.
Loading...

Props​

Customization​

data-fs-button

Best practices​

✅ Do's​

  • Use standard button designs and shapes to make your button look clickable.
  • Use styles to communicate the importance of an action by visually differentiating Primary and Secondary buttons.
  • Make buttons finger-friendly for mobile users and large enough for reliable interactions. Generally, touch targets are at least 44 by 44 CSS pixels.
  • Use task-specific words to write button labels.
  • Place the buttons in an order that reflects a conversation between the user and the system.
  • Provide visual or audio feedback on interactions. Whenever a user interacts with a button, the button should change its state and let the user know that something is happening as a consequence.
  • Define a style system for your button states (i.e., normal, focus, hover, active, pressed, disabled).
  • Use icon-only buttons only for widespread actions with highly standardized icons, such as a cross for close.
  • Use the aria-label attribute to provide a textual alternative for icon-only buttons.

❌ Don'ts​

  • Don’t make users hunt for buttons. Place buttons where users expect to see them or can easily find them.
  • Don't rely on icons to communicate complex actions.
  • Don't use generic words that can potentially confuse users.
  • Avoid cluttering the UI with too many buttons.
  • Avoid having more than one Primary action button on the screen at a time.
  • Avoid using disabled buttons, if possible. Instead, give preference to hiding the unavailable option.
  • Don't place buttons next to Badges. Although badges and buttons are similar in appearance, badges are not interactive and may confuse users if not used in the proper context.
  • Don't use Buttons as Links. Links are not intended to invite users to take action. Instead, they redirect users somewhere.