Button

Playground

Customize the Button properties to see different variations.

Installation

Overview

This is a highly versatile button component built upon Radix UI's Slot. It supports various visual styles, sizes, loading states, icons, icon animations, and a unique mechanism for creating segmented button groups using LeftInsetButton andRightInsetButton child components.

Examples

Split Button

Compact Action Group

Inset with `asChild`

Double InsetButtons

Subcomponents

Concept

LeftInsetButton and RightInsetButton are special marker components used as direct children of the main Button component. They are not rendered directly but signal to the parent Button to switch into a "button group" rendering mode. This mode creates a visually segmented button where theLeftInsetButton content appears in the left segment, RightInsetButtoncontent in the right segment, and the regular Button children appear in the central segment.

How it Works

• Detection: The parent Button checks its direct children. If it finds an instance of LeftInsetButton orRightInsetButton, it activates the group mode.
• Structure: Instead of rendering a single <button> (or Slot), the parent Button renders a div wrapper with role="group" and flexbox styles (inline-flex, items-stretch). It also adds divide-x for visual separation between segments.
• Segment Rendering:
  • If LeftInsetButton is present, its children and props are used to render the left segment (as a <button> or Slot if asChild is used on the inset).
  • If RightInsetButton is present, its children and props are used to render the right segment.
  • Any other direct children of the main Button become the content of the central segment, along with the main Button'siconLeft and iconRight (if provided).
• Styling: All segments inherit the variant and sizefrom the parent Button for visual consistency. Appropriate rounded-s-md, rounded-e-md, or no rounding is applied based on the segment's position.
• Props Application:
  • Props passed directly to LeftInsetButton or RightInsetButton (likeonClick, disabled, className, aria-label, asChild) apply only to that specific segment.
  • Props passed to the parent Button (like onClick, isLoading,iconLeft, iconRight, disabled) apply only to the central segment when in group mode. The isLoading state and icons of the parentButton do not affect the inset segments.

Props for Inset Buttons

These components accept standard button attributes:

• children: Content for the inset segment (e.g., an icon, text).
• onClick: Handler specific to clicking this segment.
• disabled: Disables only this segment.
• className: Additional classes for this segment.
• asChild: Renders the segment as its child element (e.g., an <a> tag).
• aria-label, etc.: Accessibility and other standard attributes.

Button Props