Selectable Button

A button component that can be toggled between selected and unselected states with visual feedback.

With icon

Without icon

Different sizes

Installation

1. Follow the links to install required rlx packages

PackageTypeLink
@rlx-widgets/buttonWidget

2. Install the following dependencies

Loading...

bash

API Reference

Props list

PropTypeDefaultExampleDescription
selectedboolean-trueWhether the button is in the selected state. When selected, the button uses the primary variant with enhanced styling.
iconReactNode-<CheckIcon className="size-4" />Optional icon element to display before the button content.
size"sm" | "default" | "lg" | "icon""sm"defaultThe size of the button. Accepts the same size values as the underlying Button component.
classNamestring-custom-classAdditional CSS classes to apply to the button element.
childrenReactNode-Button TextThe content to display inside the button.

Behavior

The component provides visual feedback based on the selected state:

  • When selected is false, the button uses the outline variant with card background and muted hover effects.
  • When selected is true, the button uses the default variant with primary colors and shadow for emphasis.
  • The component includes smooth transitions between states with a 200ms duration.
  • All standard button props are supported through spread props, allowing full customization of button behavior (onClick, disabled, etc.).