Group

Lay out a row or column of elements, optionally attached into one control.

React, Vue, Solid, and Svelte

import { Button } from "@isbatak/react-ui/button"
import { Group } from "@isbatak/react-ui/group"

export function GroupDemo() {
  return (
    <Group attached>
      <Button variant="outline">Day</Button>
      <Button variant="outline">Week</Button>
      <Button variant="outline">Month</Button>
    </Group>
  )
}

Spaces its children evenly, or joins them into one control with attached, rounding only the outer corners. orientation switches between a row and a column.

Usage

import { Button } from "@isbatak/react-ui/button"
import { Group } from "@isbatak/react-ui/group"

export function GroupDemo() {
  return (
    <Group attached>
      <Button variant="outline">Day</Button>
      <Button variant="outline">Week</Button>
      <Button variant="outline">Month</Button>
    </Group>
  )
}