9
Switch language to العربية

Button Group

PreviousNext

A pair of primary and secondary action buttons.

import * as React from "react"
import { Button, type ButtonProps } from "@/components/ui/button"
import { cn } from "@/lib/utils"

export interface ButtonGroupProps {
  primaryLabel?: string
  secondaryLabel?: string
  onPrimaryClick?: () => void
  onSecondaryClick?: () => void
  primaryVariant?: ButtonProps["variant"]
  secondaryVariant?: ButtonProps["variant"]
  size?: ButtonProps["size"]
  className?: string
  disabled?: boolean
  loading?: boolean
}

export function ButtonGroup({
  primaryLabel = "Submit",
  secondaryLabel = "Cancel",
  onPrimaryClick,
  onSecondaryClick,
  primaryVariant = "default",
  secondaryVariant = "ghost",
  size = "sm",
  className,
  disabled,
  loading,
}: ButtonGroupProps) {
  return (
    <div className={cn("flex gap-2", className)} data-slot="button-group">
      <Button
        variant={secondaryVariant}
        size={size}
        onClick={onSecondaryClick}
        disabled={disabled || loading}
      >
        {secondaryLabel}
      </Button>
      <Button
        variant={primaryVariant}
        size={size}
        onClick={onPrimaryClick}
        disabled={disabled || loading}
      >
        {loading ? "Loading..." : primaryLabel}
      </Button>
    </div>
  )
}

Installation

pnpm dlx codebase add button-group

Usage

import { ButtonGroup } from "@/components/atom/button-group"
<ButtonGroup primaryLabel="Save" secondaryLabel="Cancel" />

Examples

With Loading State

import * as React from "react"
import { Button, type ButtonProps } from "@/components/ui/button"
import { cn } from "@/lib/utils"

export interface ButtonGroupProps {
  primaryLabel?: string
  secondaryLabel?: string
  onPrimaryClick?: () => void
  onSecondaryClick?: () => void
  primaryVariant?: ButtonProps["variant"]
  secondaryVariant?: ButtonProps["variant"]
  size?: ButtonProps["size"]
  className?: string
  disabled?: boolean
  loading?: boolean
}

export function ButtonGroup({
  primaryLabel = "Submit",
  secondaryLabel = "Cancel",
  onPrimaryClick,
  onSecondaryClick,
  primaryVariant = "default",
  secondaryVariant = "ghost",
  size = "sm",
  className,
  disabled,
  loading,
}: ButtonGroupProps) {
  return (
    <div className={cn("flex gap-2", className)} data-slot="button-group">
      <Button
        variant={secondaryVariant}
        size={size}
        onClick={onSecondaryClick}
        disabled={disabled || loading}
      >
        {secondaryLabel}
      </Button>
      <Button
        variant={primaryVariant}
        size={size}
        onClick={onPrimaryClick}
        disabled={disabled || loading}
      >
        {loading ? "Loading..." : primaryLabel}
      </Button>
    </div>
  )
}

<ButtonGroup primaryLabel="Submit" loading />