diff --git a/apps/www/src/components/demo/demo.tsx b/apps/www/src/components/demo/demo.tsx
index 83d2b8d66..7852cbb87 100644
--- a/apps/www/src/components/demo/demo.tsx
+++ b/apps/www/src/components/demo/demo.tsx
@@ -1,10 +1,16 @@
'use client';
import {
+ FontBoldIcon,
+ FontItalicIcon,
InfoCircledIcon,
Pencil2Icon,
PlusIcon,
+ TextAlignCenterIcon,
+ TextAlignLeftIcon,
+ TextAlignRightIcon,
TransformIcon,
+ UnderlineIcon,
UploadIcon
} from '@radix-ui/react-icons';
import * as Apsara from '@raystack/apsara';
@@ -37,6 +43,12 @@ export default function Demo(props: DemoProps) {
Pencil2Icon,
InfoCircledIcon,
UploadIcon,
+ FontBoldIcon,
+ FontItalicIcon,
+ UnderlineIcon,
+ TextAlignLeftIcon,
+ TextAlignCenterIcon,
+ TextAlignRightIcon,
dayjs
}
} = props;
diff --git a/apps/www/src/components/playground/index.ts b/apps/www/src/components/playground/index.ts
index 62ec07833..cd94ee154 100644
--- a/apps/www/src/components/playground/index.ts
+++ b/apps/www/src/components/playground/index.ts
@@ -44,4 +44,5 @@ export * from './tabs-examples';
export * from './text-area-examples';
export * from './text-examples';
export * from './toast-examples';
+export * from './toggle-examples';
export * from './tooltip-examples';
diff --git a/apps/www/src/components/playground/toggle-examples.tsx b/apps/www/src/components/playground/toggle-examples.tsx
new file mode 100644
index 000000000..8549f5f0e
--- /dev/null
+++ b/apps/www/src/components/playground/toggle-examples.tsx
@@ -0,0 +1,95 @@
+'use client';
+
+import {
+ FontBoldIcon,
+ FontItalicIcon,
+ TextAlignCenterIcon,
+ TextAlignLeftIcon,
+ TextAlignRightIcon,
+ UnderlineIcon
+} from '@radix-ui/react-icons';
+import { Flex, Text, Toggle } from '@raystack/apsara';
+import PlaygroundLayout from './playground-layout';
+
+export function ToggleExamples() {
+ return (
+
+
+
+ Standalone
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Sizes
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Toggle.Group (single selection)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Toggle.Group (multiple selection)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Disabled Group
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/www/src/content/docs/components/toggle/demo.ts b/apps/www/src/content/docs/components/toggle/demo.ts
new file mode 100644
index 000000000..9d7baf3c7
--- /dev/null
+++ b/apps/www/src/content/docs/components/toggle/demo.ts
@@ -0,0 +1,123 @@
+'use client';
+
+import { getPropsString } from '@/lib/utils';
+
+const getCode = (props: any) => {
+ return `
+
+`;
+};
+
+export const playground = {
+ type: 'playground',
+ controls: {
+ defaultPressed: {
+ type: 'checkbox',
+ defaultValue: false
+ },
+ disabled: {
+ type: 'checkbox',
+ defaultValue: false
+ },
+ size: {
+ type: 'select',
+ options: ['1', '2', '3', '4'],
+ defaultValue: '3'
+ }
+ },
+ getCode
+};
+
+export const preview = {
+ type: 'code',
+ code: `
+ B
+`
+};
+
+export const groupDemo = {
+ type: 'code',
+ code: `
+
+
+
+
+
+
+
+
+
+`
+};
+
+export const multipleDemo = {
+ type: 'code',
+ code: `
+
+
+
+
+
+
+
+
+
+`
+};
+
+export const controlledDemo = {
+ type: 'code',
+ code: `function ControlledToggle() {
+ const [pressed, setPressed] = React.useState(false);
+ return (
+
+ {pressed ? "★" : "☆"}
+
+ );
+}`
+};
+
+export const sizeDemo = {
+ type: 'code',
+ code: `
+
+
+
+
+
+
+
+
+
+
+
+
+`
+};
+
+export const disabledDemo = {
+ type: 'code',
+ tabs: [
+ {
+ name: 'Single',
+ code: `
+ B
+`
+ },
+ {
+ name: 'Group',
+ code: `
+
+
+
+
+
+
+`
+ }
+ ]
+};
diff --git a/apps/www/src/content/docs/components/toggle/index.mdx b/apps/www/src/content/docs/components/toggle/index.mdx
new file mode 100644
index 000000000..311feeca5
--- /dev/null
+++ b/apps/www/src/content/docs/components/toggle/index.mdx
@@ -0,0 +1,83 @@
+---
+title: Toggle
+description: A two-state button that can be toggled on or off, used standalone or within a group.
+source: packages/raystack/components/toggle
+tag: new
+---
+
+import { playground, preview, groupDemo, multipleDemo, sizeDemo, controlledDemo, disabledDemo } from "./demo.ts";
+
+
+
+## Anatomy
+
+Import and use the component:
+
+```tsx
+import { Toggle } from "@raystack/apsara";
+
+B
+```
+
+Use `Toggle.Group` to manage a set of toggles with shared state:
+
+```tsx
+
+ L
+ C
+ R
+
+```
+
+## API Reference
+
+### Root
+
+A two-state button that can be toggled on or off.
+
+
+
+### Group
+
+Groups multiple toggle buttons and manages their shared pressed state.
+
+
+
+## Examples
+
+### Group
+
+Use `Toggle.Group` for exclusive or multi-select toggle sets. By default, only one toggle can be pressed at a time.
+
+
+
+### Multiple Selection
+
+Set `multiple` on the group to allow more than one toggle to be pressed simultaneously.
+
+
+
+### Size
+
+The toggle supports four sizes matching the icon button sizes.
+
+
+
+### Controlled
+
+Control the pressed state programmatically.
+
+
+
+### Disabled
+
+Disable individual toggles or the entire group.
+
+
+
+## Accessibility
+
+- Uses native `