Button Group

import React from 'react';
import { Button, ButtonGroup } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className='flex items-center justify-center'>
      <ButtonGroup variant="filled">
        <Button>One</Button>
        <Button>Two</Button>
        <Button>Three</Button>
      </ButtonGroup>
    </div>
  );
}

import React from 'react';
import { Button, ButtonGroup } from 'archi-ui'
 
export default function MyReactPage() {
  return (
    <div className='flex flex-col items-center justify-center gap-2'>
      <ButtonGroup variant="filled">
        <Button>One</Button>
        <Button>Two</Button>
        <Button>Three</Button>
      </ButtonGroup>
      <ButtonGroup variant="outlined">
        <Button>One</Button>
        <Button>Two</Button>
        <Button>Three</Button>
      </ButtonGroup>
      <ButtonGroup variant="ghost">
        <Button>One</Button>
        <Button>Two</Button>
        <Button>Three</Button>
      </ButtonGroup>
    </div>
  );
}

import React from 'react';
import { Button, ButtonGroup } from 'archi-ui'
 
export default function MyReactPage() {
 
  const buttons = [
    <Button key="one">One</Button>,
    <Button key="two">Two</Button>,
    <Button key="three">Three</Button>,
  ];
 
  return (
    <div className='flex flex-col items-center justify-center gap-2'>
      <ButtonGroup size="sm">
        {buttons}
      </ButtonGroup>
      <ButtonGroup size='md'>
        {buttons}
      </ButtonGroup>
      <ButtonGroup size="lg">
        {buttons}
      </ButtonGroup>
    </div>
  );
}

import React from 'react';
import { Button, ButtonGroup } from 'archi-ui'
 
export default function MyReactPage() {
 
  const buttons = [
    <Button key="one">One</Button>,
    <Button key="two">Two</Button>,
    <Button key="three">Three</Button>,
  ];
 
  return (
    <div className='flex flex-col items-center justify-center gap-2'>
      <ButtonGroup color='primary'>
        {buttons}
      </ButtonGroup>
      <ButtonGroup color='secondary'>
        {buttons}
      </ButtonGroup>
      <ButtonGroup color='success'>
        {buttons}
      </ButtonGroup>
    </div>
  );
}

"use client"
 
import React, { useState } from 'react'
import { Button, ButtonGroup, Menu, MenuItem } from 'archi-ui';
import { ChevronDown } from 'lucide-react';
 
export default function MyReactPage() {
 
  const [anchorEl, setAnchorEl] = useState(null);
  const [selectedIndex, setSelectedIndex] = React.useState(1);
  const open = Boolean(anchorEl);
 
  const options = ['Create a merge commit', 'Squash and merge', 'Rebase and merge'];
 
  const handleMenuItemClick = (index) => {
    setSelectedIndex(index);
    setAnchorEl(null);
  };
 
  const handleButtonClick = (e) => {
    setAnchorEl(e.currentTarget);
  }
 
  const handleClose = () => {
    setAnchorEl(null);
  }
 
  return (
    <div className='flex items-center justify-center'>
      <ButtonGroup variant="filled">
        <Button>{options[selectedIndex]}</Button>
        <Button onClick={handleButtonClick}>
          <ChevronDown />
        </Button>
      </ButtonGroup>
      <Menu
        open={open}
        onClose={handleClose}
        anchorEl={anchorEl}
        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
      >
        {options.map((option, index) => (
          <MenuItem
            key={option}
            disabled={index === 2}
            selected={index === selectedIndex}
            onClick={() => handleMenuItemClick(index)}
          >
            {option}
          </MenuItem>
        ))}
      </Menu>
    </div>
  );
}

import React from 'react'
import { Button, ButtonGroup } from 'archi-ui'
import { SaveIcon } from 'lucide-react'
 
export default function MyReactPage() {
 
  return (
    <div className='flex items-center justify-center'>
      <ButtonGroup variant="outlined" aria-label="Loading button group">
        <Button>Submit</Button>
        <Button>Fetch data</Button>
        <Button loading loadingPosition="start" startIcon={<SaveIcon />}>
          Save
        </Button>
      </ButtonGroup>
    </div>
  );
}

import React from 'react'
import { Button, ButtonGroup } from 'archi-ui';
 
export default function MyReactPage() {
 
  const buttons = [
    <Button key="one">One</Button>,
    <Button key="two">Two</Button>,
    <Button key="three">Three</Button>,
  ];
 
  return (
    <div className='flex items-center justify-center gap-2'>
      <ButtonGroup
        orientation="vertical"
        variant="filled"
      >
        {buttons}
      </ButtonGroup>
      <ButtonGroup
        orientation="vertical"
        variant="outlined"
      >
        {buttons}
      </ButtonGroup>
      <ButtonGroup
        orientation="vertical"
        variant="ghost"
      >
        {buttons}
      </ButtonGroup>
    </div>
  );
}