diff --git a/apps/www/src/content/docs/components/chip/demo.ts b/apps/www/src/content/docs/components/chip/demo.ts
index 528174370..b6303e8d5 100644
--- a/apps/www/src/content/docs/components/chip/demo.ts
+++ b/apps/www/src/content/docs/components/chip/demo.ts
@@ -24,7 +24,7 @@ export const playground = {
     },
     color: {
       type: 'select',
-      options: ['neutral', 'accent'],
+      options: ['neutral', 'accent', 'danger', 'success', 'warning'],
       defaultValue: 'neutral'
     },
     isDismissible: {
@@ -62,11 +62,21 @@ export const sizesDemo = {
 export const colorDemo = {
   type: 'code',
   code: `
-  <Flex gap={9}>
-    <Chip color="neutral" variant="outline">Outline</Chip>
-    <Chip color="neutral" variant="filled">Filled</Chip>
-    <Chip color="accent" variant="outline">Outline</Chip>
-    <Chip color="accent" variant="filled">Filled</Chip>
+  <Flex direction="column" gap={5}>
+    <Flex gap={9}>
+      <Chip color="neutral" variant="outline">Neutral</Chip>
+      <Chip color="accent" variant="outline">Accent</Chip>
+      <Chip color="danger" variant="outline">Danger</Chip>
+      <Chip color="success" variant="outline">Success</Chip>
+      <Chip color="warning" variant="outline">Warning</Chip>
+    </Flex>
+    <Flex gap={9}>
+      <Chip color="neutral" variant="filled">Neutral</Chip>
+      <Chip color="accent" variant="filled">Accent</Chip>
+      <Chip color="danger" variant="filled">Danger</Chip>
+      <Chip color="success" variant="filled">Success</Chip>
+      <Chip color="warning" variant="filled">Warning</Chip>
+    </Flex>
   </Flex>`
 };
 
diff --git a/apps/www/src/content/docs/components/chip/index.mdx b/apps/www/src/content/docs/components/chip/index.mdx
index 8de8908cf..8a182ff74 100644
--- a/apps/www/src/content/docs/components/chip/index.mdx
+++ b/apps/www/src/content/docs/components/chip/index.mdx
@@ -46,7 +46,7 @@ Two sizes. `large` is the default; `small` fits inside inputs and table cells.
 
 ### Color
 
-Choose between neutral and accent styles to control the visual emphasis.
+Five colors. `neutral` and `accent` set emphasis. `danger`, `success` and `warning` show status.
 
 <Demo data={colorDemo} />
 
@@ -68,6 +68,8 @@ Renders a compact element for tags, labels, or attributes.
 
 <auto-type-table path="./props.ts" name="ChipProps" />
 
+The chip renders a `<button>` when `onClick` is set and it is not dismissible, and a `<span>` otherwise, so `ref` points to whichever element is rendered.
+
 ### Slots
 
 Every rendered part carries a stable `data-slot` attribute for [styling and testing](/docs/styling#with-data-slot):
@@ -89,3 +91,5 @@ The Chip component has some accessibility features:
 - Provides keyboard navigation support
 - Makes decorative elements hidden from screen readers
 - Keeps contrast ratios correct in all variants and states
+
+`children` is optional, so a chip can be icon-only. When you omit `children`, pass an `aria-label`. The chip derives its label from string children, so without one it has no accessible name.
diff --git a/apps/www/src/content/docs/components/chip/props.ts b/apps/www/src/content/docs/components/chip/props.ts
index 7c7df54fd..09aff3b13 100644
--- a/apps/www/src/content/docs/components/chip/props.ts
+++ b/apps/www/src/content/docs/components/chip/props.ts
@@ -12,10 +12,10 @@ export interface ChipProps {
   size?: 'small' | 'large';
 
   /**
-   * Color style
+   * Color style. `danger`, `success` and `warning` convey status.
    * @defaultValue "neutral"
    */
-  color?: 'neutral' | 'accent';
+  color?: 'neutral' | 'accent' | 'danger' | 'success' | 'warning';
 
   /** ReactNode to display as an icon before the label */
   leadingIcon?: React.ReactNode;
@@ -51,4 +51,7 @@ export interface ChipProps {
    * @defaultValue The theme's `radius`
    */
   radius?: 'none' | 'small' | 'medium' | 'large' | 'full';
+
+  /** Ref to the rendered element. */
+  ref?: React.Ref<HTMLSpanElement>;
 }
diff --git a/packages/raystack/components/chip/__tests__/chip.test.tsx b/packages/raystack/components/chip/__tests__/chip.test.tsx
index f710d92f6..b5e9ad76a 100644
--- a/packages/raystack/components/chip/__tests__/chip.test.tsx
+++ b/packages/raystack/components/chip/__tests__/chip.test.tsx
@@ -1,6 +1,8 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { createRef } from 'react';
 import { describe, expect, it, vi } from 'vitest';
+import { type IconProps, IconProvider } from '~/icons';
 import { Chip } from '../chip';
 import styles from '../chip.module.css';
 
@@ -35,6 +37,19 @@ describe('Chip', () => {
       expect(screen.getByText('Chip with trailing icon')).toBeInTheDocument();
     });
 
+    it('renders an icon-only chip with no children', () => {
+      render(
+        <Chip
+          leadingIcon={<span data-testid='leading-icon'>🏷️</span>}
+          aria-label='Filter'
+        />
+      );
+
+      const chip = screen.getByRole('status');
+      expect(chip).toHaveAttribute('aria-label', 'Filter');
+      expect(screen.getByTestId('leading-icon')).toBeInTheDocument();
+    });
+
     it('applies custom className', () => {
       render(<Chip className='custom-chip'>Test Chip</Chip>);
 
@@ -81,7 +96,13 @@ describe('Chip', () => {
   });
 
   describe('Colors', () => {
-    const colors = ['neutral', 'accent'] as const;
+    const colors = [
+      'neutral',
+      'accent',
+      'danger',
+      'success',
+      'warning'
+    ] as const;
 
     it.each(colors)('renders %s color correctly', color => {
       render(<Chip color={color}>Test Chip</Chip>);
@@ -98,6 +119,37 @@ describe('Chip', () => {
     });
   });
 
+  describe('Ref', () => {
+    it('attaches to the span on the default branch', () => {
+      const ref = createRef<HTMLSpanElement>();
+      render(<Chip ref={ref}>Test Chip</Chip>);
+
+      expect(ref.current?.tagName).toBe('SPAN');
+    });
+
+    it('attaches to the button on the interactive branch', () => {
+      const ref = createRef<HTMLButtonElement>();
+      render(
+        <Chip ref={ref} onClick={vi.fn()}>
+          Test Chip
+        </Chip>
+      );
+
+      expect(ref.current?.tagName).toBe('BUTTON');
+    });
+
+    it('stays a span when dismissible, even with onClick', () => {
+      const ref = createRef<HTMLSpanElement>();
+      render(
+        <Chip ref={ref} isDismissible onClick={vi.fn()} onDismiss={vi.fn()}>
+          Test Chip
+        </Chip>
+      );
+
+      expect(ref.current?.tagName).toBe('SPAN');
+    });
+  });
+
   describe('Dismissible Behavior', () => {
     it('renders dismiss button when isDismissible is true', () => {
       render(<Chip isDismissible>Dismissible Chip</Chip>);
@@ -110,6 +162,32 @@ describe('Chip', () => {
       expect(dismissButton).toHaveAttribute('type', 'button');
     });
 
+    it('uses the shared XIcon registry icon for the dismiss button', () => {
+      const { container } = render(<Chip isDismissible>Dismissible Chip</Chip>);
+
+      const icon = container.querySelector('[data-icon="XIcon"]');
+      expect(icon).toBeInTheDocument();
+      expect(icon).toHaveAttribute('data-slot', 'chip-dismiss-icon');
+      expect(icon).toHaveAttribute('width', '12');
+      expect(icon).toHaveAttribute('height', '12');
+    });
+
+    it('passes the dismiss icon size to an XIcon override', () => {
+      const CustomX = (props: IconProps) => (
+        <svg data-testid='custom-x' {...props} />
+      );
+      render(
+        <IconProvider components={{ XIcon: CustomX }}>
+          <Chip isDismissible>Dismissible Chip</Chip>
+        </IconProvider>
+      );
+
+      const icon = screen.getByTestId('custom-x');
+      expect(icon).toHaveAttribute('data-icon', 'XIcon');
+      expect(icon).toHaveAttribute('width', '12');
+      expect(icon).toHaveAttribute('height', '12');
+    });
+
     it('calls onDismiss when dismiss button is clicked', () => {
       const onDismiss = vi.fn();
       render(
diff --git a/packages/raystack/components/chip/chip.module.css b/packages/raystack/components/chip/chip.module.css
index e9000990d..b87320265 100644
--- a/packages/raystack/components/chip/chip.module.css
+++ b/packages/raystack/components/chip/chip.module.css
@@ -20,15 +20,6 @@
   -webkit-user-select: none;
 }
 
-/* Variants */
-.chip-variant-outline {
-  background: transparent;
-}
-
-.chip-variant-filled {
-  background: var(--rs-color-background-base-primary);
-}
-
 /* Sizes */
 .chip-size-large {
   padding: var(--rs-space-2) var(--rs-space-3);
@@ -38,72 +29,104 @@
   padding: var(--rs-space-1) var(--rs-space-2);
 }
 
-/* colors - Neutral */
-.chip-color-neutral.chip-variant-outline {
-  border: 0.5px solid var(--rs-color-border-base-secondary);
-  color: var(--rs-color-foreground-base-secondary);
-}
-
-.chip-color-neutral.chip-variant-outline:hover {
-  color: var(--rs-color-foreground-base-primary);
-}
-
-.chip-color-neutral.chip-variant-outline:active,
-.chip-color-neutral.chip-variant-outline[data-state="active"] {
-  border: 0.5px solid var(--rs-color-border-base-emphasis);
-  color: var(--rs-color-foreground-base-primary);
+.chip-color-neutral {
+  --chip-border: var(--rs-color-border-base-secondary);
+  /* Neutral outline hover changes text only, not the border. */
+  --chip-border-hover: var(--rs-color-border-base-secondary);
+  --chip-border-active: var(--rs-color-border-base-emphasis);
+  --chip-fg: var(--rs-color-foreground-base-secondary);
+  --chip-fg-hover: var(--rs-color-foreground-base-primary);
+  --chip-fg-active: var(--rs-color-foreground-base-primary);
+  /* A foreground token as the border color. */
+  --chip-filled-border-hover: var(--rs-color-foreground-base-primary);
+  --chip-filled-fg-hover: var(--rs-color-foreground-base-primary);
+  --chip-filled-bg-active: var(--rs-color-background-neutral-primary);
+}
+
+.chip-color-accent {
+  --chip-border: var(--rs-color-border-accent-primary);
+  --chip-border-hover: var(--rs-color-border-accent-emphasis);
+  --chip-border-active: var(--rs-color-border-accent-emphasis);
+  --chip-fg: var(--rs-color-foreground-accent-primary);
+  --chip-fg-hover: var(--rs-color-foreground-accent-primary-hover);
+  --chip-fg-active: var(--rs-color-foreground-accent-primary);
+  --chip-filled-border-hover: var(--rs-color-border-accent-emphasis);
+  /* Accent filled hover changes the border only, not the text. */
+  --chip-filled-fg-hover: var(--rs-color-foreground-accent-primary);
+  --chip-filled-bg-active: var(--rs-color-background-accent-primary);
+}
+
+.chip-color-danger {
+  --chip-border: var(--rs-color-border-danger-primary);
+  --chip-border-hover: var(--rs-color-border-danger-emphasis);
+  --chip-border-active: var(--rs-color-border-danger-emphasis);
+  --chip-fg: var(--rs-color-foreground-danger-primary);
+  --chip-fg-hover: var(--rs-color-foreground-danger-primary-hover);
+  --chip-fg-active: var(--rs-color-foreground-danger-primary);
+  --chip-filled-border-hover: var(--rs-color-border-danger-emphasis);
+  --chip-filled-fg-hover: var(--rs-color-foreground-danger-primary);
+  --chip-filled-bg-active: var(--rs-color-background-danger-primary);
+}
+
+.chip-color-success {
+  --chip-border: var(--rs-color-border-success-primary);
+  --chip-border-hover: var(--rs-color-border-success-emphasis);
+  --chip-border-active: var(--rs-color-border-success-emphasis);
+  --chip-fg: var(--rs-color-foreground-success-primary);
+  --chip-fg-hover: var(--rs-color-foreground-success-primary-hover);
+  --chip-fg-active: var(--rs-color-foreground-success-primary);
+  --chip-filled-border-hover: var(--rs-color-border-success-emphasis);
+  --chip-filled-fg-hover: var(--rs-color-foreground-success-primary);
+  --chip-filled-bg-active: var(--rs-color-background-success-primary);
+}
+
+/* The public value is `warning`, backed by the `attention` tokens, as in Badge. */
+.chip-color-warning {
+  --chip-border: var(--rs-color-border-attention-primary);
+  --chip-border-hover: var(--rs-color-border-attention-emphasis);
+  --chip-border-active: var(--rs-color-border-attention-emphasis);
+  --chip-fg: var(--rs-color-foreground-attention-primary);
+  --chip-fg-hover: var(--rs-color-foreground-attention-primary-hover);
+  --chip-fg-active: var(--rs-color-foreground-attention-primary);
+  --chip-filled-border-hover: var(--rs-color-border-attention-emphasis);
+  --chip-filled-fg-hover: var(--rs-color-foreground-attention-primary);
+  --chip-filled-bg-active: var(--rs-color-background-attention-primary);
 }
 
-.chip-color-neutral.chip-variant-filled {
-  background: var(--rs-color-background-base-primary);
-  border: 0.5px solid var(--rs-color-border-base-secondary);
-  color: var(--rs-color-foreground-base-secondary);
-}
-
-.chip-color-neutral.chip-variant-filled:hover {
-  border-color: var(--rs-color-foreground-base-primary);
-  color: var(--rs-color-foreground-base-primary);
-  background: var(--rs-color-background-base-primary-hover);
-}
-
-.chip-color-neutral.chip-variant-filled:active,
-.chip-color-neutral.chip-variant-filled[data-state="active"] {
-  background: var(--rs-color-background-neutral-primary);
-  color: var(--rs-color-foreground-base-primary);
-}
-
-/* colors - Accent */
-.chip-color-accent.chip-variant-outline {
-  border: 0.5px solid var(--rs-color-border-accent-primary);
-  color: var(--rs-color-foreground-accent-primary);
+/* Variants */
+.chip-variant-outline {
+  background: transparent;
+  border: 0.5px solid var(--chip-border);
+  color: var(--chip-fg);
 }
 
-.chip-color-accent.chip-variant-outline:hover {
-  border-color: var(--rs-color-border-accent-emphasis);
-  color: var(--rs-color-foreground-accent-primary-hover);
+.chip-variant-outline:hover {
+  border-color: var(--chip-border-hover);
+  color: var(--chip-fg-hover);
 }
 
-.chip-color-accent.chip-variant-outline:active,
-.chip-color-accent.chip-variant-outline[data-state="active"] {
-  border: 0.5px solid var(--rs-color-border-accent-emphasis);
-  color: var(--rs-color-foreground-accent-primary);
+.chip-variant-outline:active,
+.chip-variant-outline[data-state="active"] {
+  border-color: var(--chip-border-active);
+  color: var(--chip-fg-active);
 }
 
-.chip-color-accent.chip-variant-filled {
+.chip-variant-filled {
   background: var(--rs-color-background-base-primary);
-  border: 0.5px solid var(--rs-color-border-accent-primary);
-  color: var(--rs-color-foreground-accent-primary);
+  border: 0.5px solid var(--chip-border);
+  color: var(--chip-fg);
 }
 
-.chip-color-accent.chip-variant-filled:hover {
-  border-color: var(--rs-color-border-accent-emphasis);
+.chip-variant-filled:hover {
+  border-color: var(--chip-filled-border-hover);
+  color: var(--chip-filled-fg-hover);
   background: var(--rs-color-background-base-primary-hover);
 }
 
-.chip-color-accent.chip-variant-filled:active,
-.chip-color-accent.chip-variant-filled[data-state="active"] {
-  background: var(--rs-color-background-accent-primary);
-  color: var(--rs-color-foreground-accent-primary);
+.chip-variant-filled:active,
+.chip-variant-filled[data-state="active"] {
+  background: var(--chip-filled-bg-active);
+  color: var(--chip-fg-active);
 }
 
 /* Icons */
diff --git a/packages/raystack/components/chip/chip.tsx b/packages/raystack/components/chip/chip.tsx
index ab528bd6b..cd0b11a7c 100644
--- a/packages/raystack/components/chip/chip.tsx
+++ b/packages/raystack/components/chip/chip.tsx
@@ -2,7 +2,7 @@
 
 import { cva, cx, type VariantProps } from 'class-variance-authority';
 import { ComponentProps, ReactNode } from 'react';
-
+import { XIcon } from '~/icons';
 import { radiusVariants } from '../../shared/radius';
 import styles from './chip.module.css';
 
@@ -19,7 +19,10 @@ const chip = cva(styles.chip, {
     },
     color: {
       neutral: styles['chip-color-neutral'],
-      accent: styles['chip-color-accent']
+      accent: styles['chip-color-accent'],
+      danger: styles['chip-color-danger'],
+      success: styles['chip-color-success'],
+      warning: styles['chip-color-warning']
     }
   },
   defaultVariants: {
@@ -29,12 +32,11 @@ const chip = cva(styles.chip, {
   }
 });
 
-type ChipProps = ComponentProps<'span'> &
+export type ChipProps = ComponentProps<'span'> &
   VariantProps<typeof chip> & {
     trailingIcon?: ReactNode;
     leadingIcon?: ReactNode;
     isDismissible?: boolean;
-    children: ReactNode;
     onDismiss?: () => void;
     disabled?: boolean;
   };
@@ -92,23 +94,13 @@ export const Chip = ({
           type='button'
           data-slot='chip-dismiss'
         >
-          <svg
-            width='12'
-            height='12'
-            viewBox='0 0 12 12'
-            fill='none'
-            xmlns='http://www.w3.org/2000/svg'
+          <XIcon
+            width={12}
+            height={12}
             aria-hidden='true'
             role='presentation'
             data-slot='chip-dismiss-icon'
-          >
-            <path
-              fillRule='evenodd'
-              clipRule='evenodd'
-              d='M9.5066 3.3066C9.73115 3.08205 9.73115 2.71798 9.5066 2.49343C9.28205 2.26887 8.91798 2.26887 8.69343 2.49343L6.00001 5.18684L3.3066 2.49343C3.08205 2.26887 2.71798 2.26887 2.49343 2.49343C2.26887 2.71798 2.26887 3.08205 2.49343 3.3066L5.18684 6.00001L2.49343 8.69343C2.26887 8.91798 2.26887 9.28205 2.49343 9.5066C2.71798 9.73115 3.08205 9.73115 3.3066 9.5066L6.00001 6.81318L8.69343 9.5066C8.91798 9.73115 9.28205 9.73115 9.5066 9.5066C9.73115 9.28205 9.73115 8.91798 9.5066 8.69343L6.81318 6.00001L9.5066 3.3066Z'
-              fill='currentColor'
-            />
-          </svg>
+          />
         </button>
       ) : trailingIcon ? (
         <span
diff --git a/packages/raystack/components/chip/index.tsx b/packages/raystack/components/chip/index.tsx
index c080ed8f5..b8dad1ac1 100644
--- a/packages/raystack/components/chip/index.tsx
+++ b/packages/raystack/components/chip/index.tsx
@@ -1 +1 @@
-export { Chip } from './chip';
+export { Chip, type ChipProps } from './chip';
diff --git a/packages/raystack/index.tsx b/packages/raystack/index.tsx
index 0b7fe4d51..bd8d3bef8 100644
--- a/packages/raystack/index.tsx
+++ b/packages/raystack/index.tsx
@@ -79,7 +79,7 @@ export {
   type ChatPanelTriggerProps
 } from './components/chat-panel';
 export { Checkbox } from './components/checkbox';
-export { Chip } from './components/chip';
+export { Chip, type ChipProps } from './components/chip';
 export { CodeBlock } from './components/code-block';
 export { Collapsible } from './components/collapsible';
 export * from './components/color-picker';