feat(button): rework component on top of @base-ui/react

apps/docs/components/IconGallery.tsx

@@ -51,7 +51,7 @@ const IconCell = React.memo(
 					</Typography>
 					<Button
 						variant={ButtonVariant.Ghost}
-						color={ButtonColor.None}
+						color={ButtonColor.Secondary}
 						size={ButtonSize.SM}
 						onClick={() => onCopy(name)}
 						prefix={

apps/docs/components/TokenReference/TokenReference.tsx

@@ -253,8 +253,10 @@ export function TokenReference({
 									setActiveSection('semantic');
 									setSelectedCategory(null);
 								}}
-								variant={activeSection === 'semantic' ? 'solid' : 'link'}
-								color={activeSection === 'semantic' ? 'primary' : 'secondary'}
+								{...(activeSection === 'semantic'
+									? { variant: 'solid', color: 'primary' }
+									: { variant: 'link', color: 'secondary' })}
+								size="md"
 							>
 								Semantic Tokens
 							</Button>
@@ -266,8 +268,10 @@ export function TokenReference({
 									setActiveSection('primitive');
 									setSelectedCategory(null);
 								}}
-								variant={activeSection === 'primitive' ? 'solid' : 'ghost'}
-								color={activeSection === 'primitive' ? 'primary' : 'secondary'}
+								{...(activeSection === 'primitive'
+									? { variant: 'solid', color: 'primary' }
+									: { variant: 'ghost', color: 'secondary' })}
+								size="md"
 							>
 								Primitive Colors
 							</Button>
@@ -297,16 +301,20 @@ export function TokenReference({
 								<Button
 									type="button"
 									onClick={() => setThemeMode('light')}
-									variant={themeMode === 'light' ? 'solid' : 'ghost'}
-									color={themeMode === 'light' ? 'primary' : 'secondary'}
+									{...(themeMode === 'light'
+										? { variant: 'solid', color: 'primary' }
+										: { variant: 'ghost', color: 'secondary' })}
+									size="md"
 								>
 									Light
 								</Button>
 								<Button
 									type="button"
 									onClick={() => setThemeMode('dark')}
-									variant={themeMode === 'dark' ? 'solid' : 'ghost'}
-									color={themeMode === 'dark' ? 'primary' : 'secondary'}
+									{...(themeMode === 'dark'
+										? { variant: 'solid', color: 'primary' }
+										: { variant: 'ghost', color: 'secondary' })}
+									size="md"
 								>
 									Dark
 								</Button>

apps/docs/components/TokenReference/TokenSearch.tsx

@@ -44,8 +44,10 @@ export function TokenSearch({
 					<Button
 						type="button"
 						onClick={() => onCategoryFilter(null)}
-						variant={selectedCategory === null ? 'solid' : 'outlined'}
-						color={selectedCategory === null ? 'primary' : 'secondary'}
+						{...(selectedCategory === null
+							? { variant: 'solid', color: 'primary' }
+							: { variant: 'outlined', color: 'secondary' })}
+						size="md"
 					>
 						All
 					</Button>
@@ -54,8 +56,10 @@ export function TokenSearch({
 							key={category}
 							type="button"
 							onClick={() => onCategoryFilter(category)}
-							variant={selectedCategory === category ? 'solid' : 'outlined'}
-							color={selectedCategory === category ? 'primary' : 'secondary'}
+							{...(selectedCategory === category
+								? { variant: 'solid', color: 'primary' }
+								: { variant: 'outlined', color: 'secondary' })}
+							size="md"
 						>
 							{category}
 						</Button>

apps/docs/stories/alert-dialog.stories.tsx

@@ -113,7 +113,12 @@ export const Default: Story = {
 				checkboxChecked={checked}
 				onCheckboxChange={setChecked}
 				trigger={
-					<Button variant={ButtonVariant.Solid} color={ButtonColor.Primary} prefix={<Code />}>
+					<Button
+						variant={ButtonVariant.Solid}
+						color={ButtonColor.Primary}
+						prefix={<Code />}
+						size="md"
+					>
 						Open alert dialog
 					</Button>
 				}
@@ -124,14 +129,16 @@ export const Default: Story = {
 							color="secondary"
 							prefix={<X />}
 							onClick={() => setOpen(false)}
+							size="md"
 						>
 							Cancel
 						</Button>
 						<Button
 							variant={ButtonVariant.Solid}
-							color="destructive"
+							color="danger"
 							prefix={<Trash2 />}
 							onClick={() => setOpen(false)}
+							size="md"
 						>
 							Delete Step
 						</Button>

apps/docs/stories/button-group.mdx

@@ -0,0 +1,79 @@
+import { Meta, Controls, Primary, Stories } from '@storybook/addon-docs/blocks';
+import * as ButtonGroupStories from './button-group.stories';
+
+<Meta of={ButtonGroupStories} />
+
+# ButtonGroup
+
+A segmented cluster of related buttons. It renders `<div role="group">` with deduped internal
+borders and only the outer corners rounded.
+
+## How to use
+
+The group lays its children out in a row and squares off the borders between them. Each button
+carries its own `variant`, `color` and `size`, and the group takes a `variant` and a `color` of
+its own:
+
+```tsx
+import { Button, ButtonGroup } from '@signozhq/ui';
+
+export default function MyComponent() {
+	return (
+		<ButtonGroup variant="outlined" color="secondary" size="md">
+			<Button variant="outlined" color="secondary" size="md">
+				Day
+			</Button>
+			<Button variant="outlined" color="secondary" size="md">
+				Week
+			</Button>
+			<Button variant="outlined" color="secondary" size="md">
+				Month
+			</Button>
+		</ButtonGroup>
+	);
+}
+```
+
+`variant`, `color` and `size` on the group are mirrored as `data-variant`, `data-color` and
+`data-size`, ready for your own selectors and assertions.
+
+<Primary />
+
+## Mixed appearances
+
+Each member reads its own appearance, so one can differ from the rest:
+
+```tsx
+<ButtonGroup variant="outlined" color="secondary" size="md">
+	<Button variant="outlined" color="secondary" size="md">
+		Approve
+	</Button>
+	<Button variant="outlined" color="secondary" size="md">
+		Hold
+	</Button>
+	<Button variant="solid" color="danger" size="md">
+		Reject
+	</Button>
+</ButtonGroup>
+```
+
+Icon-only members work the same way, each with its own `aria-label`:
+
+```tsx
+import { ChevronLeft, ChevronRight } from '@signozhq/icons';
+
+<ButtonGroup variant="outlined" color="secondary" size="md">
+	<Button variant="outlined" color="secondary" size="md" icon aria-label="Previous">
+		<ChevronLeft />
+	</Button>
+	<Button variant="outlined" color="secondary" size="md" icon aria-label="Next">
+		<ChevronRight />
+	</Button>
+</ButtonGroup>;
+```
+
+## Props
+
+<Controls of={ButtonGroupStories.Default} />
+
+<Stories includePrimary={false} title="Examples" />