Variants

Use the variant prop to determine if the buttons are icon or text. Text buttons will have uniform size based on the largest button.

Color Variants

Available color variants: neutral (default), accent and primary.

Outlined

Use the hasOutline prop to add a visible outline around the group.

Button Shape

Use optional "Pill" Button-Shape

Sizes

Available sizes: small, medium (default), and large

Props

ToggleButtonGroup
System Props

  • COMMON
  • TYPOGRAPHY
  • BORDER
  • LAYOUT
  • POSITION
  • FLEX
  • GRID
  • Learn More
NameTypeDescription
onChange(evt: MouseEvent<HTMLButtonElement, MouseEvent>, newValue: string) => voidEvent handler for when the value changes, receives both the click event and the new value
gradientResponsiveValue<TLengthStyledSystem, Required<Theme<TLengthStyledSystem>>>-
size"small" | "medium" | "large"Defines the size variant of each button in the group
valuestringUse for controlled
variant"text" | "icon"The type of content in each button
colorVariant"neutral" | "accent" | "primary"Defines the color variant of each button in the group
buttonShape"default" | "pill"Optional "pill" shape for the grouped buttons
hasOutlinebooleanWhether the group has an outline
ToggleButton
System Props

NameTypeDescription
iconReactNodeIcon name or component.

Accessibility

  • <ToggleButtonGroup /> needs aria-label since these aren't designed to have a visible label
  • For <ToggleButton variant="icon" />, aria-label should be provided