Button

The Button component allows users to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.

Usage

Basic usage

import { Button } from '@snipshot/particles';

export default function ButtonDefault() {
  return <Button>Confirm</Button>;
}

Variants

The Button component comes with five different variants: filled, outlined, text, soft, and elevated.

Colors

You can choose from one of the predefined color options by passing a color props value: primary, secondary, tertiary, info, success, warning, error.
If you need an unstyled button, pass the uncolored value.

Radiuses

You can customize the border radius by providing a radius prop value.

Sizes

To make a button smaller or larger use the size props with the following values: xs, sm, md, lg, xl.

You can also use a dense property to reduce paddings:

Icons

You can add icons to the Button component using leftIcon and rightIcon props.

Disabled state

The component supports accessible disabled state with the disabled prop.

Loading state

The Button component supports a loading state with a loading spinner (or a custom loading element) and optional loading text using isLoading, loadingText, and loadingElement props.

Polymorphic component

The Button is a polymorphic component, which means that you can use the as prop to specify any valid HTML element as a string or a React component. This chosen element will serve as the base for rendering the Button component, replacing the default <button> element.

Accessibility

The Button component follows WAI-ARIA (opens in a new tab) best practices to ensure accessibility for all users. It includes semantic <button> element and appropriate ARIA attributes to enhance compatibility with screen readers and assistive technologies.

API Reference

CSS custom properties

The Button component provides several CSS variables that can be used for styling via CSS modules or using a style attribute of the component.