UI Lab | Group

Group

Groups Button, Input, Select, and Expand with unified border styling.

import { Group } from "ui-lab-components";
 
export function Example() {
  return (
    <Group>
      <Group.Button>Save</Group.Button>
      <Group.Button variant="outline">Cancel</Group.Button>
    </Group>
  );
}

Orientation

Spacing

Disabled

Basic Group

A simple group container that arranges multiple elements together. Use this to organize related UI elements in a consistent layout.

import { Group } from 'ui-lab-components';
 
export default function Example() {
  return (
    <Group>
      <Group.Button>First</Group.Button>
      <Group.Button>Second</Group.Button>
      <Group.Button>Third</Group.Button>
    </Group>
  );
}