diff --git a/packages/buttons/src/components/close-button.gts b/packages/buttons/src/components/close-button.gts
index ee459c52..90754cca 100644
--- a/packages/buttons/src/components/close-button.gts
+++ b/packages/buttons/src/components/close-button.gts
@@ -2,7 +2,7 @@ import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { on } from '@ember/modifier';
 import { VisuallyHidden } from '@frontile/utilities';
-import { useStyles } from '@frontile/theme';
+import { useStyles, type CloseButtonVariants } from '@frontile/theme';
 
 interface CloseButtonSignature {
   Args: {
@@ -18,7 +18,12 @@ interface CloseButtonSignature {
      *
      * @defaultValue 'lg'
      */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    size?: CloseButtonVariants['size'];
+
+    /**
+     * @defaultValue 'transparent'
+     */
+    variant?: CloseButtonVariants['variant'];
 
     /**
      * The function to call when button is clicked
@@ -41,7 +46,8 @@ class CloseButton extends Component<CloseButtonSignature> {
     const { closeButton } = useStyles();
 
     let { base, icon } = closeButton({
-      size: this.args.size || 'md'
+      size: this.args.size || 'md',
+      variant: this.args.variant || 'transparent'
     });
 
     return {
diff --git a/packages/forms/package.json b/packages/forms/package.json
index 3926365d..fd337a89 100644
--- a/packages/forms/package.json
+++ b/packages/forms/package.json
@@ -42,6 +42,7 @@
   "dependencies": {
     "@ember/test-waiters": "^3.0.2",
     "@embroider/addon-shim": "^1.8.7",
+    "@frontile/buttons": "workspace:0.17.0-alpha.15",
     "@frontile/collections": "workspace:0.17.0-alpha.15",
     "@frontile/overlays": "workspace:0.17.0-alpha.15",
     "@frontile/theme": "workspace:0.17.0-alpha.15",
diff --git a/packages/forms/src/components/input.gts b/packages/forms/src/components/input.gts
index cbd14465..aa1027f1 100644
--- a/packages/forms/src/components/input.gts
+++ b/packages/forms/src/components/input.gts
@@ -11,6 +11,7 @@ import {
 import { FormControl, type FormControlSharedArgs } from './form-control';
 import { triggerFormInputEvent } from '../utils';
 import { ref } from '@frontile/utilities';
+import { CloseButton } from '@frontile/buttons';
 
 interface Args extends FormControlSharedArgs {
   type?: string;
@@ -183,13 +184,13 @@ class Input extends Component<InputSignature> {
             {{yield to="endContent"}}
 
             {{#if this.isClearable}}
-              <button
+              <CloseButton
+                @title="Clear"
+                @variant="subtle"
+                @size="xs"
                 data-test-id="input-clear-button"
-                type="button"
-                {{on "click" this.clearValue}}
-              >
-                x
-              </button>
+                @onClick={{this.clearValue}}
+              />
             {{/if}}
           </div>
         {{/if}}
diff --git a/packages/theme/src/components/close-button.ts b/packages/theme/src/components/close-button.ts
index 366b657d..1fb96617 100644
--- a/packages/theme/src/components/close-button.ts
+++ b/packages/theme/src/components/close-button.ts
@@ -1,23 +1,36 @@
-import { tv } from '../tw';
+import { tv, type VariantProps } from '../tw';
 
 const closeButton = tv({
   slots: {
-    base: 'rounded-full hover:bg-default-100 transition transition-200 focus-visable:ring text-inherit',
+    base: 'rounded-full transition transition-200 focus-visable:ring text-inherit',
     icon: 'size-[1em]'
   },
 
   variants: {
     size: {
-      xs: 'text-sm p-1',
-      sm: 'text-base p-2',
-      md: 'text-xl p-2',
-      lg: 'text-2xl p-3',
-      xl: 'text-4xl p-3'
+      xs: { base: 'text-sm p-1' },
+      sm: { base: 'text-base p-2' },
+      md: { base: 'text-xl p-2' },
+      lg: { base: 'text-2xl p-3' },
+      xl: { base: 'text-4xl p-3' }
+    },
+    variant: {
+      transparent: { base: ['bg-transparent', 'hover:bg-default-100'] },
+      subtle: {
+        base: [
+          'bg-default-100',
+          'text-default-foreground dark:text-default-background',
+          'dark:bg-default-200',
+          'hover:bg-default-200/60 dark:hover:bg-default-800/60'
+        ]
+      }
     }
   },
   defaultVariants: {
-    size: 'md'
+    size: 'md',
+    variant: 'transparent'
   }
 });
 
+export type CloseButtonVariants = VariantProps<typeof closeButton>;
 export { closeButton };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b3bff463..077e59be 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -403,6 +403,9 @@ importers:
       '@embroider/addon-shim':
         specifier: ^1.8.7
         version: 1.8.7
+      '@frontile/buttons':
+        specifier: workspace:0.17.0-alpha.15
+        version: link:../buttons
       '@frontile/collections':
         specifier: workspace:0.17.0-alpha.15
         version: link:../collections
diff --git a/site/app/components/signature-data.ts b/site/app/components/signature-data.ts
index 8254deee..3390f4bd 100644
--- a/site/app/components/signature-data.ts
+++ b/site/app/components/signature-data.ts
@@ -413,6 +413,21 @@ const data: ComponentDoc[] = [
         description: 'The title of the close button',
         tags: { defaultValue: { name: 'defaultValue', value: "'Close'" } },
         defaultValue: '<span class="hljs-string">\'Close\'</span>'
+      },
+      {
+        identifier: 'variant',
+        type: {
+          type: '<span class="hljs-built_in">enum</span>',
+          raw: '<span class="hljs-string">\'transparent\'</span> | <span class="hljs-string">\'subtle\'</span>',
+          items: ["'transparent'", "'subtle'"]
+        },
+        isRequired: false,
+        isInternal: false,
+        description: '',
+        tags: {
+          defaultValue: { name: 'defaultValue', value: "'transparent'" }
+        },
+        defaultValue: '<span class="hljs-string">\'transparent\'</span>'
       }
     ],
     Blocks: [
@@ -1968,6 +1983,18 @@ const data: ComponentDoc[] = [
         description: '',
         tags: {}
       },
+      {
+        identifier: 'endContentPointerEvents',
+        type: {
+          type: '<span class="hljs-built_in">enum</span>',
+          raw: '<span class="hljs-string">\'none\'</span> | <span class="hljs-string">\'auto\'</span>',
+          items: ["'none'", "'auto'"]
+        },
+        isRequired: false,
+        isInternal: false,
+        description: '',
+        tags: {}
+      },
       {
         identifier: 'errors',
         type: {
@@ -1980,6 +2007,14 @@ const data: ComponentDoc[] = [
         description: '',
         tags: {}
       },
+      {
+        identifier: 'isClearable',
+        type: { type: '<span class="hljs-built_in">boolean</span>' },
+        isRequired: false,
+        isInternal: false,
+        description: '',
+        tags: {}
+      },
       {
         identifier: 'isInvalid',
         type: { type: '<span class="hljs-built_in">boolean</span>' },
@@ -2016,7 +2051,7 @@ const data: ComponentDoc[] = [
         identifier: 'onChange',
         type: {
           type: '<span class="hljs-function"><span class="hljs-keyword">function</span></span>',
-          raw: '(value: <span class="hljs-built_in">string</span>, <span class="hljs-attr">event</span>: InputEvent) => <span class="hljs-built_in">void</span>'
+          raw: '(value: <span class="hljs-built_in">string</span>, event?: InputEvent) => <span class="hljs-built_in">void</span>'
         },
         isRequired: false,
         isInternal: false,
@@ -2027,7 +2062,7 @@ const data: ComponentDoc[] = [
         identifier: 'onInput',
         type: {
           type: '<span class="hljs-function"><span class="hljs-keyword">function</span></span>',
-          raw: '(value: <span class="hljs-built_in">string</span>, <span class="hljs-attr">event</span>: InputEvent) => <span class="hljs-built_in">void</span>'
+          raw: '(value: <span class="hljs-built_in">string</span>, event?: InputEvent) => <span class="hljs-built_in">void</span>'
         },
         isRequired: false,
         isInternal: false,
@@ -2046,6 +2081,18 @@ const data: ComponentDoc[] = [
         description: '',
         tags: {}
       },
+      {
+        identifier: 'startContentPointerEvents',
+        type: {
+          type: '<span class="hljs-built_in">enum</span>',
+          raw: '<span class="hljs-string">\'none\'</span> | <span class="hljs-string">\'auto\'</span>',
+          items: ["'none'", "'auto'"]
+        },
+        isRequired: false,
+        isInternal: false,
+        description: '',
+        tags: {}
+      },
       {
         identifier: 'type',
         type: { type: '<span class="hljs-built_in">string</span>' },
@@ -2968,7 +3015,7 @@ const data: ComponentDoc[] = [
       {
         identifier: 'classes',
         type: {
-          type: 'SlotsToClasses&#x3C;<span class="hljs-string">\'trigger\'</span> | <span class="hljs-string">\'base\'</span> | <span class="hljs-string">\'placeholder\'</span> | <span class="hljs-string">\'listbox\'</span> | <span class="hljs-string">\'icon\'</span>>'
+          type: 'SlotsToClasses&#x3C;<span class="hljs-string">\'base\'</span> | <span class="hljs-string">\'icon\'</span> | <span class="hljs-string">\'trigger\'</span> | <span class="hljs-string">\'placeholder\'</span> | <span class="hljs-string">\'listbox\'</span>>'
         },
         isRequired: false,
         isInternal: false,
diff --git a/test-app/app/components/forms/form-example.gts b/test-app/app/components/forms/form-example.gts
index 69570464..21b3f633 100644
--- a/test-app/app/components/forms/form-example.gts
+++ b/test-app/app/components/forms/form-example.gts
@@ -61,6 +61,22 @@ export default class FormExample extends Component<FormExampleArgs> {
       </Input>
 
       <Input
+        @size="sm"
+        @name="field-1"
+        @label={{MyCustomLabel}}
+        @description="Cool field"
+        @isRequired={{true}}
+        @isClearable={{true}}
+      />
+      <Input
+        @name="field-1"
+        @label={{MyCustomLabel}}
+        @description="Cool field"
+        @isRequired={{true}}
+        @isClearable={{true}}
+      />
+      <Input
+        @size="lg"
         @name="field-1"
         @label={{MyCustomLabel}}
         @description="Cool field"