diff --git a/src/spinner/index.ts b/src/spinner/index.ts
index 2db4552a..bddc5329 100644
--- a/src/spinner/index.ts
+++ b/src/spinner/index.ts
@@ -3,33 +3,19 @@ import { Spinner } from './spinner';
 import styles from './spinner.style';
 
 /**
- * ### Example
- *
- *
- * ##### Simple
- *
- * ```html
- * <tap-spinner />
- * ```
- *
- * ##### Variant
- *
- * ```html
- * <tap-spinner variant="inverse" />
- * ```
- *
  * @summary Display spinner.
  *
- * @prop {`'default'` \| `'primary'` \| `'inverse'`} [`variant`=`'primary'`] - Specifies the spinner color. Acceptable values are `primary` and `inverse`.
+ * @prop {'default'|'primary'|'inverse'} [variant='primary'] - Specifies the spinner color. Acceptable values are `primary` and `inverse`.
+ * @prop {'small' | 'medium' | 'large'} [size='medium'] - The size of the spinner.
  *
  * @csspart `svg` - The svg tag that represents spinner component.
  *
- * @cssprop [`--tap-spinner-color-primary`=`--tap-sys-color-surface-black`]
- * @cssprop [`--tap-spinner-color-inverse`=`--tap-sys-color-surface-white`]
- * @cssprop [`--tap-spinner-sm-size`=`--tap-sys-spacing-7`]
- * @cssprop [`--tap-spinner-md-size`=`--tap-sys-spacing-8`]
- * @cssprop [`--tap-spinner-lg-size`=`--tap-sys-spacing-10`]
- * @cssprop [`--tap-spinner-padding`=`--tap-sys-spacing-2`]
+ * @cssprop [--tap-spinner-color-primary=--tap-sys-color-surface-black]
+ * @cssprop [--tap-spinner-color-inverse=--tap-sys-color-surface-white]
+ * @cssprop [--tap-spinner-sm-size=--tap-sys-spacing-7]
+ * @cssprop [--tap-spinner-md-size=--tap-sys-spacing-8]
+ * @cssprop [--tap-spinner-lg-size=--tap-sys-spacing-10]
+ * @cssprop [--tap-spinner-padding=--tap-sys-spacing-2]
  */
 
 @customElement('tap-spinner')
diff --git a/src/spinner/spinner.ts b/src/spinner/spinner.ts
index 4bf3bc0a..efb692ba 100644
--- a/src/spinner/spinner.ts
+++ b/src/spinner/spinner.ts
@@ -2,10 +2,10 @@ import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
 
 export class Spinner extends LitElement {
-  @property({ reflect: true }) variant: 'primary' | 'inverse' | 'default' = 'default';
+  @property({ reflect: true }) variant: 'primary' | 'inverse' | 'default' =
+    'default';
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
 
-
   render() {
     return html`
       <svg