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'

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

data-fs-button

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’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.