diff --git a/docs/assets/plugins/metadata/metadata.js b/docs/assets/plugins/metadata/metadata.js
index 06598fd3..dc5aa4c5 100644
--- a/docs/assets/plugins/metadata/metadata.js
+++ b/docs/assets/plugins/metadata/metadata.js
@@ -357,11 +357,11 @@
             </div>
 
             <div class="component-header__info">
-              <sl-badge type="neutral" pill>
+              <sl-badge variant="neutral" pill>
                 Since ${component.since || '?'}
               </sl-badge>
 
-              <sl-badge type="${badgeType}" pill style="text-transform: capitalize;">
+              <sl-badge variant="${badgeType}" pill style="text-transform: capitalize;">
                 ${component.status}
               </sl-badge>
             </div>
diff --git a/docs/components/alert.md b/docs/components/alert.md
index 3e2d0b80..3cab705a 100644
--- a/docs/components/alert.md
+++ b/docs/components/alert.md
@@ -2,7 +2,7 @@
 
 [component-header:sl-alert]
 
-Alerts are used to display important messages either inline or as toast notifications.
+Alerts are used to display important messages inline or as toast notifications.
 
 ```html preview
 <sl-alert open>
@@ -26,12 +26,12 @@ const App = () => (
 
 ## Examples
 
-### Types
+### Variants
 
-Set the `type` attribute to change the alert's type.
+Set the `variant` attribute to change the alert's variant.
 
 ```html preview
-<sl-alert type="primary" open>
+<sl-alert variant="primary" open>
   <sl-icon slot="icon" name="info-circle"></sl-icon>
   <strong>This is super informative</strong><br>
   You can tell by how pretty the alert is.
@@ -39,7 +39,7 @@ Set the `type` attribute to change the alert's type.
 
 <br>
 
-<sl-alert type="success" open>
+<sl-alert variant="success" open>
   <sl-icon slot="icon" name="check2-circle"></sl-icon>
   <strong>Your changes have been saved</strong><br>
   You can safely exit the app now.
@@ -47,7 +47,7 @@ Set the `type` attribute to change the alert's type.
 
 <br>
 
-<sl-alert type="neutral" open>
+<sl-alert variant="neutral" open>
   <sl-icon slot="icon" name="gear"></sl-icon>
   <strong>Your settings have been updated</strong><br>
   Settings will take affect on next login.
@@ -55,7 +55,7 @@ Set the `type` attribute to change the alert's type.
 
 <br>
 
-<sl-alert type="warning" open>
+<sl-alert variant="warning" open>
   <sl-icon slot="icon" name="exclamation-triangle"></sl-icon>
   <strong>Your session has ended</strong><br>
   Please login again to continue.
@@ -63,7 +63,7 @@ Set the `type` attribute to change the alert's type.
 
 <br>
 
-<sl-alert type="danger" open>
+<sl-alert variant="danger" open>
   <sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
     <strong>Your account has been deleted</strong><br>
     We're very sorry to see you go!
@@ -75,7 +75,7 @@ import { SlAlert, SlIcon } from '@shoelace-style/shoelace/dist/react';
 
 const App = () => (
   <>
-    <SlAlert type="primary" open>
+    <SlAlert variant="primary" open>
       <SlIcon slot="icon" name="info-circle" />
       <strong>This is super informative</strong><br />
       You can tell by how pretty the alert is.
@@ -83,7 +83,7 @@ const App = () => (
 
     <br />
 
-    <SlAlert type="success" open>
+    <SlAlert variant="success" open>
       <SlIcon slot="icon" name="check2-circle" />
       <strong>Your changes have been saved</strong><br />
       You can safely exit the app now.
@@ -91,7 +91,7 @@ const App = () => (
 
     <br />
 
-    <SlAlert type="neutral" open>
+    <SlAlert variant="neutral" open>
       <SlIcon slot="icon" name="gear" />
       <strong>Your settings have been updated</strong><br />
       Settings will take affect on next login.
@@ -99,7 +99,7 @@ const App = () => (
 
     <br />
 
-    <SlAlert type="warning" open>
+    <SlAlert variant="warning" open>
       <SlIcon slot="icon" name="exclamation-triangle" />
       <strong>Your session has ended</strong><br />
       Please login again to continue.
@@ -107,7 +107,7 @@ const App = () => (
 
     <br />
 
-    <SlAlert type="danger" open>
+    <SlAlert variant="danger" open>
       <SlIcon slot="icon" name="exclamation-octagon" />
         <strong>Your account has been deleted</strong><br />
         We're very sorry to see you go!
@@ -121,7 +121,7 @@ const App = () => (
 Add the `closable` attribute to show a close button that will hide the alert.
 
 ```html preview
-<sl-alert type="primary" open closable class="alert-closable">
+<sl-alert variant="primary" open closable class="alert-closable">
   <sl-icon slot="icon" name="info-circle"></sl-icon>
   You can close this alert any time!
 </sl-alert>
@@ -164,7 +164,7 @@ const App = () => {
 Icons are optional. Simply omit the `icon` slot if you don't want them.
 
 ```html preview
-<sl-alert type="primary" open>
+<sl-alert variant="primary" open>
   Nothing fancy here, just a simple alert.
 </sl-alert>
 ```
@@ -173,7 +173,7 @@ Icons are optional. Simply omit the `icon` slot if you don't want them.
 import { SlAlert } from '@shoelace-style/shoelace/dist/react';
 
 const App = () => (
-  <SlAlert type="primary" open>
+  <SlAlert variant="primary" open>
     Nothing fancy here, just a simple alert.
   </SlAlert>
 );
@@ -185,9 +185,9 @@ Set the `duration` attribute to automatically hide an alert after a period of ti
 
 ```html preview
 <div class="alert-duration">
-  <sl-button type="primary">Show Alert</sl-button>
+  <sl-button variant="primary">Show Alert</sl-button>
 
-  <sl-alert type="primary" duration="3000" closable>
+  <sl-alert variant="primary" duration="3000" closable>
     <sl-icon slot="icon" name="info-circle"></sl-icon>
     This alert will automatically hide itself after three seconds, unless you interact with it.
   </sl-alert>
@@ -228,10 +228,10 @@ const App = () => {
   return (
     <>
       <div className="alert-duration">
-        <SlButton type="primary" onClick={() => setOpen(true)}>Show Alert</SlButton>
+        <SlButton variant="primary" onClick={() => setOpen(true)}>Show Alert</SlButton>
 
         <SlAlert 
-          type="primary" 
+          variant="primary" 
           duration="3000" 
           open={open} 
           closable 
@@ -256,37 +256,37 @@ You should always use the `closable` attribute so users can dismiss the notifica
 
 ```html preview
 <div class="alert-toast">
-  <sl-button type="primary">Primary</sl-button>
-  <sl-button type="success">Success</sl-button>
-  <sl-button type="neutral">Neutral</sl-button>
-  <sl-button type="warning">Warning</sl-button>
-  <sl-button type="danger">Danger</sl-button>
+  <sl-button variant="primary">Primary</sl-button>
+  <sl-button variant="success">Success</sl-button>
+  <sl-button variant="neutral">Neutral</sl-button>
+  <sl-button variant="warning">Warning</sl-button>
+  <sl-button variant="danger">Danger</sl-button>
   
-  <sl-alert type="primary" duration="3000" closable>
+  <sl-alert variant="primary" duration="3000" closable>
     <sl-icon slot="icon" name="info-circle"></sl-icon>
     <strong>This is super informative</strong><br>
     You can tell by how pretty the alert is.
   </sl-alert>
 
-  <sl-alert type="success" duration="3000" closable>
+  <sl-alert variant="success" duration="3000" closable>
     <sl-icon slot="icon" name="check2-circle"></sl-icon>
     <strong>Your changes have been saved</strong><br>
     You can safely exit the app now.
   </sl-alert>
 
-  <sl-alert type="neutral" duration="3000" closable>
+  <sl-alert variant="neutral" duration="3000" closable>
     <sl-icon slot="icon" name="gear"></sl-icon>
     <strong>Your settings have been updated</strong><br>
     Settings will take affect on next login.
   </sl-alert>
 
-  <sl-alert type="warning" duration="3000" closable>
+  <sl-alert variant="warning" duration="3000" closable>
     <sl-icon slot="icon" name="exclamation-triangle"></sl-icon>
     <strong>Your session has ended</strong><br>
     Please login again to continue.
   </sl-alert>
 
-  <sl-alert type="danger" duration="3000" closable>
+  <sl-alert variant="danger" duration="3000" closable>
     <sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
     <strong>Your account has been deleted</strong><br>
     We're very sorry to see you go!
@@ -296,9 +296,9 @@ You should always use the `closable` attribute so users can dismiss the notifica
 <script>
   const container = document.querySelector('.alert-toast');
 
-  ['primary', 'success', 'neutral', 'warning', 'danger'].map(type => {
-    const button = container.querySelector(`sl-button[type="${type}"]`);
-    const alert = container.querySelector(`sl-alert[type="${type}"]`);
+  ['primary', 'success', 'neutral', 'warning', 'danger'].map(variant => {
+    const button = container.querySelector(`sl-button[variant="${variant}"]`);
+    const alert = container.querySelector(`sl-alert[variant="${variant}"]`);
 
     button.addEventListener('click', () => alert.toast());
   });
@@ -326,51 +326,51 @@ const App = () => {
 
   return (
     <>
-      <SlButton type="primary" onClick={() => primary.current.toast()}>
+      <SlButton variant="primary" onClick={() => primary.current.toast()}>
         Primary
       </SlButton>
 
-      <SlButton type="success" onClick={() => success.current.toast()}>
+      <SlButton variant="success" onClick={() => success.current.toast()}>
         Success
       </SlButton>
 
-      <SlButton type="neutral" onClick={() => neutral.current.toast()}>
+      <SlButton variant="neutral" onClick={() => neutral.current.toast()}>
         Neutral
       </SlButton>
 
-      <SlButton type="warning" onClick={() => warning.current.toast()}>
+      <SlButton variant="warning" onClick={() => warning.current.toast()}>
         Warning
       </SlButton>
 
-      <SlButton type="danger" onClick={() => danger.current.toast()}>
+      <SlButton variant="danger" onClick={() => danger.current.toast()}>
         Danger
       </SlButton>
 
-      <SlAlert ref={primary} type="primary" duration="3000" closable>
+      <SlAlert ref={primary} variant="primary" duration="3000" closable>
         <SlIcon slot="icon" name="info-circle" />
         <strong>This is super informative</strong><br />
         You can tell by how pretty the alert is.
       </SlAlert>
 
-      <SlAlert ref={success} type="success" duration="3000" closable>
+      <SlAlert ref={success} variant="success" duration="3000" closable>
         <SlIcon slot="icon" name="check2-circle" />
         <strong>Your changes have been saved</strong><br />
         You can safely exit the app now.
       </SlAlert>
 
-      <SlAlert ref={neutral} type="neutral" duration="3000" closable>
+      <SlAlert ref={neutral} variant="neutral" duration="3000" closable>
         <SlIcon slot="icon" name="gear" />
         <strong>Your settings have been updated</strong><br />
         Settings will take affect on next login.
       </SlAlert>
 
-      <SlAlert ref={warning} type="warning" duration="3000" closable>
+      <SlAlert ref={warning} variant="warning" duration="3000" closable>
         <SlIcon slot="icon" name="exclamation-triangle" />
         <strong>Your session has ended</strong><br />
         Please login again to continue.
       </SlAlert>
 
-      <SlAlert ref={danger} type="danger" duration="3000" closable>
+      <SlAlert ref={danger} variant="danger" duration="3000" closable>
         <SlIcon slot="icon" name="exclamation-octagon" />
         <strong>Your account has been deleted</strong><br />
         We're very sorry to see you go!
@@ -386,7 +386,7 @@ For convenience, you can create a utility that emits toast notifications with a
 
 ```html preview
 <div class="alert-toast-wrapper">
-  <sl-button type="primary">Create Toast</sl-button>
+  <sl-button variant="primary">Create Toast</sl-button>
 </div>
 
 <script>
@@ -402,9 +402,9 @@ For convenience, you can create a utility that emits toast notifications with a
   }  
 
   // Custom function to emit toast notifications
-  function notify(message, type = 'primary', icon = 'info-circle', duration = 3000) {
+  function notify(message, variant = 'primary', icon = 'info-circle', duration = 3000) {
     const alert = Object.assign(document.createElement('sl-alert'), {
-      type: type,
+      variant,
       closable: true,
       duration: duration,
       innerHTML: `
diff --git a/docs/components/animation.md b/docs/components/animation.md
index 4998393f..e27a014c 100644
--- a/docs/components/animation.md
+++ b/docs/components/animation.md
@@ -308,7 +308,7 @@ Animations won't play until you apply the `play` attribute. You can omit it init
 ```html preview
 <div class="animation-form">
   <sl-animation name="rubberBand" duration="1000" iterations="1">
-    <sl-button type="primary">Click me</sl-button>
+    <sl-button variant="primary">Click me</sl-button>
   </sl-animation>
 </div>
 
@@ -339,7 +339,7 @@ const App = () => {
         play={play}
         onSlFinish={() => setPlay(false)}
       >
-        <SlButton type="primary" onClick={() => setPlay(true)}>
+        <SlButton variant="primary" onClick={() => setPlay(true)}>
           Click me
         </SlButton>
       </SlAnimation>
diff --git a/docs/components/badge.md b/docs/components/badge.md
index 19009b39..430bb0cc 100644
--- a/docs/components/badge.md
+++ b/docs/components/badge.md
@@ -18,16 +18,16 @@ const App = () => (
 
 ## Examples
 
-### Types
+### Variants
 
-Set the `type` attribute to change the badge's type.
+Set the `variant` attribute to change the badge's variant.
 
 ```html preview
-<sl-badge type="primary">Primary</sl-badge>
-<sl-badge type="success">Success</sl-badge>
-<sl-badge type="neutral">Neutral</sl-badge>
-<sl-badge type="warning">Warning</sl-badge>
-<sl-badge type="danger">Danger</sl-badge>
+<sl-badge variant="primary">Primary</sl-badge>
+<sl-badge variant="success">Success</sl-badge>
+<sl-badge variant="neutral">Neutral</sl-badge>
+<sl-badge variant="warning">Warning</sl-badge>
+<sl-badge variant="danger">Danger</sl-badge>
 ```
 
 ```jsx react
@@ -35,11 +35,11 @@ import { SlBadge } from '@shoelace-style/shoelace/dist/react';
 
 const App = () => (
   <>
-    <SlBadge type="primary">Primary</SlBadge>
-    <SlBadge type="success">Success</SlBadge>
-    <SlBadge type="neutral">Neutral</SlBadge>
-    <SlBadge type="warning">Warning</SlBadge>
-    <SlBadge type="danger">Danger</SlBadge>  
+    <SlBadge variant="primary">Primary</SlBadge>
+    <SlBadge variant="success">Success</SlBadge>
+    <SlBadge variant="neutral">Neutral</SlBadge>
+    <SlBadge variant="warning">Warning</SlBadge>
+    <SlBadge variant="danger">Danger</SlBadge>  
   </>
 );
 ```
@@ -49,11 +49,11 @@ const App = () => (
 Use the `pill` attribute to give badges rounded edges.
 
 ```html preview
-<sl-badge type="primary" pill>Primary</sl-badge>
-<sl-badge type="success" pill>Success</sl-badge>
-<sl-badge type="neutral" pill>Neutral</sl-badge>
-<sl-badge type="warning" pill>Warning</sl-badge>
-<sl-badge type="danger" pill>Danger</sl-badge>
+<sl-badge variant="primary" pill>Primary</sl-badge>
+<sl-badge variant="success" pill>Success</sl-badge>
+<sl-badge variant="neutral" pill>Neutral</sl-badge>
+<sl-badge variant="warning" pill>Warning</sl-badge>
+<sl-badge variant="danger" pill>Danger</sl-badge>
 ```
 
 ```jsx react
@@ -61,11 +61,11 @@ import { SlBadge } from '@shoelace-style/shoelace/dist/react';
 
 const App = () => (
   <>
-    <SlBadge type="primary" pill>Primary</SlBadge>
-    <SlBadge type="success" pill>Success</SlBadge>
-    <SlBadge type="neutral" pill>Neutral</SlBadge>
-    <SlBadge type="warning" pill>Warning</SlBadge>
-    <SlBadge type="danger" pill>Danger</SlBadge>  
+    <SlBadge variant="primary" pill>Primary</SlBadge>
+    <SlBadge variant="success" pill>Success</SlBadge>
+    <SlBadge variant="neutral" pill>Neutral</SlBadge>
+    <SlBadge variant="warning" pill>Warning</SlBadge>
+    <SlBadge variant="danger" pill>Danger</SlBadge>  
   </>
 );
 ```
@@ -76,11 +76,11 @@ Use the `pulse` attribute to draw attention to the badge with a subtle animation
 
 ```html preview
 <div class="badge-pulse">
-  <sl-badge type="primary" pill pulse>1</sl-badge>
-  <sl-badge type="success" pill pulse>1</sl-badge>
-  <sl-badge type="neutral" pill pulse>1</sl-badge>
-  <sl-badge type="warning" pill pulse>1</sl-badge>
-  <sl-badge type="danger" pill pulse>1</sl-badge>
+  <sl-badge variant="primary" pill pulse>1</sl-badge>
+  <sl-badge variant="success" pill pulse>1</sl-badge>
+  <sl-badge variant="neutral" pill pulse>1</sl-badge>
+  <sl-badge variant="warning" pill pulse>1</sl-badge>
+  <sl-badge variant="danger" pill pulse>1</sl-badge>
 </div>
 
 <style>
@@ -102,11 +102,11 @@ const css = `
 const App = () => (
   <>
     <div className="badge-pulse">
-      <SlBadge type="primary" pill pulse>1</SlBadge>
-      <SlBadge type="success" pill pulse>1</SlBadge>
-      <SlBadge type="neutral" pill pulse>1</SlBadge>
-      <SlBadge type="warning" pill pulse>1</SlBadge>
-      <SlBadge type="danger" pill pulse>1</SlBadge>
+      <SlBadge variant="primary" pill pulse>1</SlBadge>
+      <SlBadge variant="success" pill pulse>1</SlBadge>
+      <SlBadge variant="neutral" pill pulse>1</SlBadge>
+      <SlBadge variant="warning" pill pulse>1</SlBadge>
+      <SlBadge variant="danger" pill pulse>1</SlBadge>
     </div>
 
     <style>{css}</style>
@@ -126,12 +126,12 @@ One of the most common use cases for badges is attaching them to buttons. To mak
 
 <sl-button style="margin-left: 1rem;">
   Warnings
-  <sl-badge type="warning" pill>8</sl-badge>
+  <sl-badge variant="warning" pill>8</sl-badge>
 </sl-button>
 
 <sl-button style="margin-left: 1rem;">
   Errors
-  <sl-badge type="danger" pill>6</sl-badge>
+  <sl-badge variant="danger" pill>6</sl-badge>
 </sl-button>
 ```
 
@@ -147,12 +147,12 @@ const App = () => (
 
     <SlButton style={{ marginLeft: '1rem' }}>
       Warnings
-      <SlBadge type="warning" pill>8</SlBadge>
+      <SlBadge variant="warning" pill>8</SlBadge>
     </SlButton>
 
     <SlButton style={{ marginLeft: '1rem' }}>
       Errors
-      <SlBadge type="danger" pill>6</SlBadge>
+      <SlBadge variant="danger" pill>6</SlBadge>
     </SlButton>
   </>
 );
@@ -165,8 +165,8 @@ When including badges in menu items, use the `suffix` slot to make sure they're
 ```html preview
 <sl-menu style="max-width: 240px; border: solid 1px var(--sl-panel-border-color); border-radius: var(--sl-border-radius-medium);">
   <sl-menu-label>Messages</sl-menu-label>
-  <sl-menu-item>Comments <sl-badge slot="suffix" type="neutral" pill>4</sl-badge></sl-menu-item>
-  <sl-menu-item>Replies <sl-badge slot="suffix" type="neutral" pill>12</sl-badge></sl-menu-item>
+  <sl-menu-item>Comments <sl-badge slot="suffix" variant="neutral" pill>4</sl-badge></sl-menu-item>
+  <sl-menu-item>Replies <sl-badge slot="suffix" variant="neutral" pill>12</sl-badge></sl-menu-item>
 </sl-menu>
 ```
 
@@ -182,8 +182,8 @@ const App = () => (
     }}
   >
     <SlMenuLabel>Messages</SlMenuLabel>
-    <SlMenuItem>Comments <SlBadge slot="suffix" type="neutral" pill>4</SlBadge></SlMenuItem>
-    <SlMenuItem>Replies <SlBadge slot="suffix" type="neutral" pill>12</SlBadge></SlMenuItem>
+    <SlMenuItem>Comments <SlBadge slot="suffix" variant="neutral" pill>4</SlBadge></SlMenuItem>
+    <SlMenuItem>Replies <SlBadge slot="suffix" variant="neutral" pill>12</SlBadge></SlMenuItem>
   </SlMenu>
 );
 ```
diff --git a/docs/components/button-group.md b/docs/components/button-group.md
index 7b9b4fdc..8b081524 100644
--- a/docs/components/button-group.md
+++ b/docs/components/button-group.md
@@ -90,41 +90,41 @@ Theme buttons are supported through the button's `type` attribute.
 
 ```html preview
 <sl-button-group>
-  <sl-button type="primary">Left</sl-button>
-  <sl-button type="primary">Center</sl-button>
-  <sl-button type="primary">Right</sl-button>
+  <sl-button variant="primary">Left</sl-button>
+  <sl-button variant="primary">Center</sl-button>
+  <sl-button variant="primary">Right</sl-button>
 </sl-button-group>
 
 <br><br>
 
 <sl-button-group>
-  <sl-button type="success">Left</sl-button>
-  <sl-button type="success">Center</sl-button>
-  <sl-button type="success">Right</sl-button>
+  <sl-button variant="success">Left</sl-button>
+  <sl-button variant="success">Center</sl-button>
+  <sl-button variant="success">Right</sl-button>
 </sl-button-group>
 
 <br><br>
 
 <sl-button-group>
-  <sl-button type="neutral">Left</sl-button>
-  <sl-button type="neutral">Center</sl-button>
-  <sl-button type="neutral">Right</sl-button>
+  <sl-button variant="neutral">Left</sl-button>
+  <sl-button variant="neutral">Center</sl-button>
+  <sl-button variant="neutral">Right</sl-button>
 </sl-button-group>
 
 <br><br>
 
 <sl-button-group>
-  <sl-button type="warning">Left</sl-button>
-  <sl-button type="warning">Center</sl-button>
-  <sl-button type="warning">Right</sl-button>
+  <sl-button variant="warning">Left</sl-button>
+  <sl-button variant="warning">Center</sl-button>
+  <sl-button variant="warning">Right</sl-button>
 </sl-button-group>
 
 <br><br>
 
 <sl-button-group>
-  <sl-button type="danger">Left</sl-button>
-  <sl-button type="danger">Center</sl-button>
-  <sl-button type="danger">Right</sl-button>
+  <sl-button variant="danger">Left</sl-button>
+  <sl-button variant="danger">Center</sl-button>
+  <sl-button variant="danger">Right</sl-button>
 </sl-button-group>
 ```
 
@@ -134,41 +134,41 @@ import { SlButton, SlButtonGroup } from '@shoelace-style/shoelace/dist/react';
 const App = () => (
   <>
     <SlButtonGroup>
-      <SlButton type="primary">Left</SlButton>
-      <SlButton type="primary">Center</SlButton>
-      <SlButton type="primary">Right</SlButton>
+      <SlButton variant="primary">Left</SlButton>
+      <SlButton variant="primary">Center</SlButton>
+      <SlButton variant="primary">Right</SlButton>
     </SlButtonGroup>
 
     <br /><br />
 
     <SlButtonGroup>
-      <SlButton type="success">Left</SlButton>
-      <SlButton type="success">Center</SlButton>
-      <SlButton type="success">Right</SlButton>
+      <SlButton variant="success">Left</SlButton>
+      <SlButton variant="success">Center</SlButton>
+      <SlButton variant="success">Right</SlButton>
     </SlButtonGroup>
 
     <br /><br />
 
     <SlButtonGroup>
-      <SlButton type="neutral">Left</SlButton>
-      <SlButton type="neutral">Center</SlButton>
-      <SlButton type="neutral">Right</SlButton>
+      <SlButton variant="neutral">Left</SlButton>
+      <SlButton variant="neutral">Center</SlButton>
+      <SlButton variant="neutral">Right</SlButton>
     </SlButtonGroup>
 
     <br /><br />
 
     <SlButtonGroup>
-      <SlButton type="warning">Left</SlButton>
-      <SlButton type="warning">Center</SlButton>
-      <SlButton type="warning">Right</SlButton>
+      <SlButton variant="warning">Left</SlButton>
+      <SlButton variant="warning">Center</SlButton>
+      <SlButton variant="warning">Right</SlButton>
     </SlButtonGroup>
 
     <br /><br />
 
     <SlButtonGroup>
-      <SlButton type="danger">Left</SlButton>
-      <SlButton type="danger">Center</SlButton>
-      <SlButton type="danger">Right</SlButton>
+      <SlButton variant="danger">Left</SlButton>
+      <SlButton variant="danger">Center</SlButton>
+      <SlButton variant="danger">Right</SlButton>
     </SlButtonGroup>
   </>
 );
@@ -282,9 +282,9 @@ Create a split button using a button and a dropdown.
 
 ```html preview
 <sl-button-group> 
-  <sl-button type="primary">Save</sl-button>
+  <sl-button variant="primary">Save</sl-button>
   <sl-dropdown placement="bottom-end">
-    <sl-button slot="trigger" type="primary" caret></sl-button>
+    <sl-button slot="trigger" variant="primary" caret></sl-button>
     <sl-menu>
       <sl-menu-item>Save</sl-menu-item>
       <sl-menu-item>Save as&hellip;</sl-menu-item>
@@ -305,9 +305,9 @@ import {
 
 const App = () => (
   <SlButtonGroup> 
-    <SlButton type="primary">Save</SlButton>
+    <SlButton variant="primary">Save</SlButton>
     <SlDropdown placement="bottom-end">
-      <SlButton slot="trigger" type="primary" caret></SlButton>
+      <SlButton slot="trigger" variant="primary" caret></SlButton>
       <SlMenu>
         <SlMenuItem>Save</SlMenuItem>
         <SlMenuItem>Save as&hellip;</SlMenuItem>
diff --git a/docs/components/button.md b/docs/components/button.md
index f6a2aa9c..9ef10195 100644
--- a/docs/components/button.md
+++ b/docs/components/button.md
@@ -18,17 +18,17 @@ const App = () => (
 
 ## Examples
 
-### Types
+### Variants
 
-Use the `type` attribute to set the button's type.
+Use the `variant` attribute to set the button's variant.
 
 ```html preview
-<sl-button type="default">Default</sl-button>
-<sl-button type="primary">Primary</sl-button>
-<sl-button type="success">Success</sl-button>
-<sl-button type="neutral">Neutral</sl-button>
-<sl-button type="warning">Warning</sl-button>
-<sl-button type="danger">Danger</sl-button>
+<sl-button variant="default">Default</sl-button>
+<sl-button variant="primary">Primary</sl-button>
+<sl-button variant="success">Success</sl-button>
+<sl-button variant="neutral">Neutral</sl-button>
+<sl-button variant="warning">Warning</sl-button>
+<sl-button variant="danger">Danger</sl-button>
 ```
 
 ```jsx react
@@ -36,12 +36,12 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react';
 
 const App = () => (
   <>
-    <SlButton type="default">Default</SlButton>
-    <SlButton type="primary">Primary</SlButton>
-    <SlButton type="success">Success</SlButton>
-    <SlButton type="neutral">Neutral</SlButton>
-    <SlButton type="warning">Warning</SlButton>
-    <SlButton type="danger">Danger</SlButton>  
+    <SlButton variant="default">Default</SlButton>
+    <SlButton variant="primary">Primary</SlButton>
+    <SlButton variant="success">Success</SlButton>
+    <SlButton variant="neutral">Neutral</SlButton>
+    <SlButton variant="warning">Warning</SlButton>
+    <SlButton variant="danger">Danger</SlButton>  
   </>
 );
 ```
@@ -73,12 +73,12 @@ const App = () => (
 Use the `outline` attribute to draw outlined buttons with transparent backgrounds.
 
 ```html preview
-<sl-button type="default" outline>Default</sl-button>
-<sl-button type="primary" outline>Primary</sl-button>
-<sl-button type="success" outline>Success</sl-button>
-<sl-button type="neutral" outline>Neutral</sl-button>
-<sl-button type="warning" outline>Warning</sl-button>
-<sl-button type="danger" outline>Danger</sl-button>
+<sl-button variant="default" outline>Default</sl-button>
+<sl-button variant="primary" outline>Primary</sl-button>
+<sl-button variant="success" outline>Success</sl-button>
+<sl-button variant="neutral" outline>Neutral</sl-button>
+<sl-button variant="warning" outline>Warning</sl-button>
+<sl-button variant="danger" outline>Danger</sl-button>
 ```
 
 ```jsx react
@@ -86,12 +86,12 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react';
 
 const App = () => (
   <>
-    <SlButton type="default" outline>Default</SlButton>
-    <SlButton type="primary" outline>Primary</SlButton>
-    <SlButton type="success" outline>Success</SlButton>
-    <SlButton type="neutral" outline>Neutral</SlButton>
-    <SlButton type="warning" outline>Warning</SlButton>
-    <SlButton type="danger" outline>Danger</SlButton>
+    <SlButton variant="default" outline>Default</SlButton>
+    <SlButton variant="primary" outline>Primary</SlButton>
+    <SlButton variant="success" outline>Success</SlButton>
+    <SlButton variant="neutral" outline>Neutral</SlButton>
+    <SlButton variant="warning" outline>Warning</SlButton>
+    <SlButton variant="danger" outline>Danger</SlButton>
   </>
 );
 ```
@@ -123,9 +123,9 @@ const App = () => (
 Use the `circle` attribute to create circular icon buttons.
 
 ```html preview
-<sl-button type="default" size="small" circle><sl-icon name="gear"></sl-icon></sl-button>
-<sl-button type="default" size="medium" circle><sl-icon name="gear"></sl-icon></sl-button>
-<sl-button type="default" size="large" circle><sl-icon name="gear"></sl-icon></sl-button>
+<sl-button variant="default" size="small" circle><sl-icon name="gear"></sl-icon></sl-button>
+<sl-button variant="default" size="medium" circle><sl-icon name="gear"></sl-icon></sl-button>
+<sl-button variant="default" size="large" circle><sl-icon name="gear"></sl-icon></sl-button>
 ```
 
 ```jsx react
@@ -133,21 +133,21 @@ import { SlButton, SlIcon } from '@shoelace-style/shoelace/dist/react';
 
 const App = () => (
   <>
-    <SlButton type="default" size="small" circle><SlIcon name="gear" /></SlButton>
-    <SlButton type="default" size="medium" circle><SlIcon name="gear" /></SlButton>
-    <SlButton type="default" size="large" circle><SlIcon name="gear" /></SlButton>
+    <SlButton variant="default" size="small" circle><SlIcon name="gear" /></SlButton>
+    <SlButton variant="default" size="medium" circle><SlIcon name="gear" /></SlButton>
+    <SlButton variant="default" size="large" circle><SlIcon name="gear" /></SlButton>
   </>
 );
 ```
 
 ### Text Buttons
 
-Use the `text` type to create text buttons that share the same size as regular buttons but don't have backgrounds or borders.
+Use the `text` variant to create text buttons that share the same size as regular buttons but don't have backgrounds or borders.
 
 ```html preview
-<sl-button type="text" size="small">Text</sl-button>
-<sl-button type="text" size="medium">Text</sl-button>
-<sl-button type="text" size="large">Text</sl-button>
+<sl-button variant="text" size="small">Text</sl-button>
+<sl-button variant="text" size="medium">Text</sl-button>
+<sl-button variant="text" size="large">Text</sl-button>
 ```
 
 ```jsx react
@@ -155,9 +155,9 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react';
 
 const App = () => (
   <>
-    <SlButton type="text" size="small">Text</SlButton>
-    <SlButton type="text" size="medium">Text</SlButton>
-    <SlButton type="text" size="large">Text</SlButton>
+    <SlButton variant="text" size="small">Text</SlButton>
+    <SlButton variant="text" size="medium">Text</SlButton>
+    <SlButton variant="text" size="large">Text</SlButton>
   </>
 );
 ```
@@ -193,9 +193,9 @@ const App = () => (
 As expected, buttons can be given a custom width by setting the `width` attribute. This is useful for making buttons span the full width of their container on smaller screens.
 
 ```html preview
-<sl-button type="default" size="small" style="width: 100%; margin-bottom: 1rem;">Small</sl-button>
-<sl-button type="default" size="medium" style="width: 100%; margin-bottom: 1rem;">Medium</sl-button>
-<sl-button type="default" size="large" style="width: 100%;">Large</sl-button>
+<sl-button variant="default" size="small" style="width: 100%; margin-bottom: 1rem;">Small</sl-button>
+<sl-button variant="default" size="medium" style="width: 100%; margin-bottom: 1rem;">Medium</sl-button>
+<sl-button variant="default" size="large" style="width: 100%;">Large</sl-button>
 ```
 
 ```jsx react
@@ -203,9 +203,9 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react';
 
 const App = () => (
   <>
-    <SlButton type="default" size="small" style={{ width: '100%', marginBottom: '1rem' }}>Small</SlButton>
-    <SlButton type="default" size="medium" style={{ width: '100%', marginBottom: '1rem' }}>Medium</SlButton>
-    <SlButton type="default" size="large" style={{ width: '100%' }}>Large</SlButton>
+    <SlButton variant="default" size="small" style={{ width: '100%', marginBottom: '1rem' }}>Small</SlButton>
+    <SlButton variant="default" size="medium" style={{ width: '100%', marginBottom: '1rem' }}>Medium</SlButton>
+    <SlButton variant="default" size="large" style={{ width: '100%' }}>Large</SlButton>
   </>
 );
 ```
@@ -215,17 +215,17 @@ const App = () => (
 Use the `prefix` and `suffix` slots to add icons.
 
 ```html preview
-<sl-button type="default" size="small">
+<sl-button variant="default" size="small">
   <sl-icon slot="prefix" name="gear"></sl-icon>
   Settings
 </sl-button>
 
-<sl-button type="default" size="small">
+<sl-button variant="default" size="small">
   <sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon>
   Refresh
 </sl-button>
 
-<sl-button type="default" size="small">
+<sl-button variant="default" size="small">
   <sl-icon slot="prefix" name="link-45deg"></sl-icon>
   <sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon>
   Open
@@ -233,17 +233,17 @@ Use the `prefix` and `suffix` slots to add icons.
 
 <br><br>
 
-<sl-button type="default">
+<sl-button variant="default">
   <sl-icon slot="prefix" name="gear"></sl-icon>
   Settings
 </sl-button>
 
-<sl-button type="default">
+<sl-button variant="default">
   <sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon>
   Refresh
 </sl-button>
 
-<sl-button type="default">
+<sl-button variant="default">
   <sl-icon slot="prefix" name="link-45deg"></sl-icon>
   <sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon>
   Open
@@ -251,17 +251,17 @@ Use the `prefix` and `suffix` slots to add icons.
 
 <br><br>
 
-<sl-button type="default" size="large">
+<sl-button variant="default" size="large">
   <sl-icon slot="prefix" name="gear"></sl-icon>
   Settings
 </sl-button>
 
-<sl-button type="default" size="large">
+<sl-button variant="default" size="large">
   <sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon>
   Refresh
 </sl-button>
 
-<sl-button type="default" size="large">
+<sl-button variant="default" size="large">
   <sl-icon slot="prefix" name="link-45deg"></sl-icon>
   <sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon>
   Open
@@ -273,17 +273,17 @@ import { SlButton, SlIcon } from '@shoelace-style/shoelace/dist/react';
 
 const App = () => (
   <>
-    <SlButton type="default" size="small">
+    <SlButton variant="default" size="small">
       <SlIcon slot="prefix" name="gear"></SlIcon>
       Settings
     </SlButton>
 
-    <SlButton type="default" size="small">
+    <SlButton variant="default" size="small">
       <SlIcon slot="suffix" name="arrow-counterclockwise"></SlIcon>
       Refresh
     </SlButton>
 
-    <SlButton type="default" size="small">
+    <SlButton variant="default" size="small">
       <SlIcon slot="prefix" name="link-45deg"></SlIcon>
       <SlIcon slot="suffix" name="box-arrow-up-right"></SlIcon>
       Open
@@ -291,17 +291,17 @@ const App = () => (
 
     <br /><br/ >
 
-    <SlButton type="default">
+    <SlButton variant="default">
       <SlIcon slot="prefix" name="gear"></SlIcon>
       Settings
     </SlButton>
 
-    <SlButton type="default">
+    <SlButton variant="default">
       <SlIcon slot="suffix" name="arrow-counterclockwise"></SlIcon>
       Refresh
     </SlButton>
 
-    <SlButton type="default">
+    <SlButton variant="default">
       <SlIcon slot="prefix" name="link-45deg"></SlIcon>
       <SlIcon slot="suffix" name="box-arrow-up-right"></SlIcon>
       Open
@@ -309,17 +309,17 @@ const App = () => (
 
     <br /><br />
 
-    <SlButton type="default" size="large">
+    <SlButton variant="default" size="large">
       <SlIcon slot="prefix" name="gear"></SlIcon>
       Settings
     </SlButton>
 
-    <SlButton type="default" size="large">
+    <SlButton variant="default" size="large">
       <SlIcon slot="suffix" name="arrow-counterclockwise"></SlIcon>
       Refresh
     </SlButton>
 
-    <SlButton type="default" size="large">
+    <SlButton variant="default" size="large">
       <SlIcon slot="prefix" name="link-45deg"></SlIcon>
       <SlIcon slot="suffix" name="box-arrow-up-right"></SlIcon>
       Open
@@ -355,12 +355,12 @@ const App = () => (
 Use the `loading` attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around. Clicks will be suppressed until the loading state is removed.
 
 ```html preview
-<sl-button type="default" loading>Default</sl-button>
-<sl-button type="primary" loading>Primary</sl-button>
-<sl-button type="success" loading>Success</sl-button>
-<sl-button type="neutral" loading>Neutral</sl-button>
-<sl-button type="warning" loading>Warning</sl-button>
-<sl-button type="danger" loading>Danger</sl-button>
+<sl-button variant="default" loading>Default</sl-button>
+<sl-button variant="primary" loading>Primary</sl-button>
+<sl-button variant="success" loading>Success</sl-button>
+<sl-button variant="neutral" loading>Neutral</sl-button>
+<sl-button variant="warning" loading>Warning</sl-button>
+<sl-button variant="danger" loading>Danger</sl-button>
 ```
 
 ```jsx react
@@ -368,12 +368,12 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react';
 
 const App = () => (
   <>
-    <SlButton type="default" loading>Default</SlButton>
-    <SlButton type="primary" loading>Primary</SlButton>
-    <SlButton type="success" loading>Success</SlButton>
-    <SlButton type="neutral" loading>Neutral</SlButton>
-    <SlButton type="warning" loading>Warning</SlButton>
-    <SlButton type="danger" loading>Danger</SlButton>
+    <SlButton variant="default" loading>Default</SlButton>
+    <SlButton variant="primary" loading>Primary</SlButton>
+    <SlButton variant="success" loading>Success</SlButton>
+    <SlButton variant="neutral" loading>Neutral</SlButton>
+    <SlButton variant="warning" loading>Warning</SlButton>
+    <SlButton variant="danger" loading>Danger</SlButton>
   </>
 );
 ```
@@ -383,12 +383,12 @@ const App = () => (
 Use the `disabled` attribute to disable a button. Clicks will be suppressed until the disabled state is removed.
 
 ```html preview
-<sl-button type="default" disabled>Default</sl-button>
-<sl-button type="primary" disabled>Primary</sl-button>
-<sl-button type="success" disabled>Success</sl-button>
-<sl-button type="neutral" disabled>Neutral</sl-button>
-<sl-button type="warning" disabled>Warning</sl-button>
-<sl-button type="danger" disabled>Danger</sl-button>
+<sl-button variant="default" disabled>Default</sl-button>
+<sl-button variant="primary" disabled>Primary</sl-button>
+<sl-button variant="success" disabled>Success</sl-button>
+<sl-button variant="neutral" disabled>Neutral</sl-button>
+<sl-button variant="warning" disabled>Warning</sl-button>
+<sl-button variant="danger" disabled>Danger</sl-button>
 ```
 
 ```jsx react
@@ -396,19 +396,19 @@ import { SlButton } from '@shoelace-style/shoelace/dist/react';
 
 const App = () => (
   <>
-    <SlButton type="default" disabled>Default</SlButton>
-    <SlButton type="primary" disabled>Primary</SlButton>
-    <SlButton type="success" disabled>Success</SlButton>
-    <SlButton type="neutral" disabled>Neutral</SlButton>
-    <SlButton type="warning" disabled>Warning</SlButton>
-    <SlButton type="danger" disabled>Danger</SlButton>
+    <SlButton variant="default" disabled>Default</SlButton>
+    <SlButton variant="primary" disabled>Primary</SlButton>
+    <SlButton variant="success" disabled>Success</SlButton>
+    <SlButton variant="neutral" disabled>Neutral</SlButton>
+    <SlButton variant="warning" disabled>Warning</SlButton>
+    <SlButton variant="danger" disabled>Danger</SlButton>
   </>
 );
 ```
 
 ### Styling Buttons
 
-This example demonstrates how to style buttons using a custom class. This is the recommended approach if you need to add additional variations. To customize an existing variation, modify the selector to target the button's type attribute instead of a class (e.g. `sl-button[type="primary"]`).
+This example demonstrates how to style buttons using a custom class. This is the recommended approach if you need to add additional variations. To customize an existing variation, modify the selector to target the button's `variant` attribute instead of a class (e.g. `sl-button[variant="primary"]`).
 
 ```html preview
 <sl-button class="pink">Pink Button</sl-button>
diff --git a/docs/components/card.md b/docs/components/card.md
index f9d7707d..4d4b0fef 100644
--- a/docs/components/card.md
+++ b/docs/components/card.md
@@ -17,7 +17,7 @@ Cards can be used to group related subjects in a container.
   <small>6 weeks old</small>
 
   <div slot="footer">
-    <sl-button type="primary" pill>More Info</sl-button>
+    <sl-button variant="primary" pill>More Info</sl-button>
     <sl-rating></sl-rating>
   </div>
 </sl-card>
@@ -76,7 +76,7 @@ const App = () => (
       <small>6 weeks old</small>
 
       <div slot="footer">
-        <SlButton type="primary" pill>More Info</SlButton>
+        <SlButton variant="primary" pill>More Info</SlButton>
         <SlRating></SlRating>
       </div>
     </SlCard>
@@ -210,7 +210,7 @@ Footers can be used to display actions, summaries, or other relevant content.
 
   <div slot="footer">
     <sl-rating></sl-rating>
-    <sl-button slot="footer" type="primary">Preview</sl-button>
+    <sl-button slot="footer" variant="primary">Preview</sl-button>
   </div>
 </sl-card>
 
@@ -253,7 +253,7 @@ const App = () => (
 
       <div slot="footer">
         <SlRating></SlRating>
-        <SlButton slot="footer" type="primary">Preview</SlButton>
+        <SlButton slot="footer" variant="primary">Preview</SlButton>
       </div>
     </SlCard>
 
diff --git a/docs/components/dialog.md b/docs/components/dialog.md
index f96c0e20..60e9bbcb 100644
--- a/docs/components/dialog.md
+++ b/docs/components/dialog.md
@@ -7,7 +7,7 @@ Dialogs, sometimes called "modals", appear above the page and require the user's
 ```html preview
 <sl-dialog label="Dialog" class="dialog-overview">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  <sl-button slot="footer" type="primary">Close</sl-button>
+  <sl-button slot="footer" variant="primary">Close</sl-button>
 </sl-dialog>
 
 <sl-button>Open Dialog</sl-button>
@@ -33,7 +33,7 @@ const App = () => {
     <>
       <SlDialog label="Dialog" open={open} onSlAfterHide={() => setOpen(false)}>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        <SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
           Close
         </SlButton>
       </SlDialog>
@@ -59,7 +59,7 @@ Use the `--width` custom property to set the dialog's width.
 ```html preview
 <sl-dialog label="Dialog" class="dialog-width" style="--width: 50vw;">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  <sl-button slot="footer" type="primary">Close</sl-button>
+  <sl-button slot="footer" variant="primary">Close</sl-button>
 </sl-dialog>
 
 <sl-button>Open Dialog</sl-button>
@@ -90,7 +90,7 @@ const App = () => {
         onSlAfterHide={() => setOpen(false)}
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        <SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
           Close
         </SlButton>
       </SlDialog>
@@ -110,7 +110,7 @@ By design, a dialog's height will never exceed that of the viewport. As such, di
   <div style="height: 150vh; border: dashed 2px var(--sl-color-neutral-200); padding: 0 1rem;">
     <p>Scroll down and give it a try! 👇</p>
   </div>
-  <sl-button slot="footer" type="primary">Close</sl-button>
+  <sl-button slot="footer" variant="primary">Close</sl-button>
 </sl-dialog>
 
 <sl-button>Open Dialog</sl-button>
@@ -143,7 +143,7 @@ const App = () => {
           <p>Scroll down and give it a try! 👇</p>
         </div>
 
-        <SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
           Close
         </SlButton>
       </SlDialog>
@@ -163,7 +163,7 @@ To keep the dialog open in such cases, you can cancel the `sl-request-close` eve
 ```html preview
 <sl-dialog label="Dialog" class="dialog-deny-close">
   This dialog will not close unless you use the button below.
-  <sl-button slot="footer" type="primary">Save &amp; Close</sl-button>
+  <sl-button slot="footer" variant="primary">Save &amp; Close</sl-button>
 </sl-dialog>
 
 <sl-button>Open Dialog</sl-button>
@@ -196,7 +196,7 @@ const App = () => {
         onSlAfterHide={() => setOpen(false)}
       >
         This dialog will not close unless you use the button below.
-        <SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
           Save &amp; Close
         </SlButton>
       </SlDialog>
@@ -214,7 +214,7 @@ By default, the dialog's panel will gain focus when opened. This allows a subseq
 ```html preview
 <sl-dialog label="Dialog" class="dialog-focus">
   <sl-input placeholder="I will have focus when the dialog is opened"></sl-input>
-  <sl-button slot="footer" type="primary">Close</sl-button>
+  <sl-button slot="footer" variant="primary">Close</sl-button>
 </sl-dialog>
 
 <sl-button>Open Dialog</sl-button>
@@ -261,7 +261,7 @@ const App = () => {
         onSlAfterHide={() => setOpen(false)}
       >
         <SlInput ref={input} placeholder="I will have focus when the dialog is opened" />
-        <SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
           Close
         </SlButton>
       </SlDialog>
diff --git a/docs/components/drawer.md b/docs/components/drawer.md
index a9526b3e..28b76504 100644
--- a/docs/components/drawer.md
+++ b/docs/components/drawer.md
@@ -7,7 +7,7 @@ Drawers slide in from a container to expose additional options and information.
 ```html preview
 <sl-drawer label="Drawer" class="drawer-overview">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  <sl-button slot="footer" type="primary">Close</sl-button>
+  <sl-button slot="footer" variant="primary">Close</sl-button>
 </sl-drawer>
 
 <sl-button>Open Drawer</sl-button>
@@ -15,7 +15,7 @@ Drawers slide in from a container to expose additional options and information.
 <script>
   const drawer = document.querySelector('.drawer-overview');
   const openButton = drawer.nextElementSibling;
-  const closeButton = drawer.querySelector('sl-button[type="primary"]');
+  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
 
   openButton.addEventListener('click', () => drawer.show());
   closeButton.addEventListener('click', () => drawer.hide());
@@ -33,7 +33,7 @@ const App = () => {
     <>
       <SlDrawer label="Drawer" open={open} onSlAfterHide={() => setOpen(false)}>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        <SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
           Close
         </SlButton>
       </SlDrawer>
@@ -53,7 +53,7 @@ By default, drawers slide in from the end. To make the drawer slide in from the
 ```html preview
 <sl-drawer label="Drawer" placement="start" class="drawer-placement-start">
   This drawer slides in from the start.
-  <sl-button slot="footer" type="primary">Close</sl-button>
+  <sl-button slot="footer" variant="primary">Close</sl-button>
 </sl-drawer>
 
 <sl-button>Open Drawer</sl-button>
@@ -61,7 +61,7 @@ By default, drawers slide in from the end. To make the drawer slide in from the
 <script>
   const drawer = document.querySelector('.drawer-placement-start');
   const openButton = drawer.nextElementSibling;
-  const closeButton = drawer.querySelector('sl-button[type="primary"]');
+  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
 
   openButton.addEventListener('click', () => drawer.show());
   closeButton.addEventListener('click', () => drawer.hide());
@@ -84,7 +84,7 @@ const App = () => {
         onSlAfterHide={() => setOpen(false)}
       >
         This drawer slides in from the start.
-        <SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
           Close
         </SlButton>
       </SlDrawer>
@@ -102,7 +102,7 @@ To make the drawer slide in from the top, set the `placement` attribute to `top`
 ```html preview
 <sl-drawer label="Drawer" placement="top" class="drawer-placement-top">
   This drawer slides in from the top.
-  <sl-button slot="footer" type="primary">Close</sl-button>
+  <sl-button slot="footer" variant="primary">Close</sl-button>
 </sl-drawer>
 
 <sl-button>Open Drawer</sl-button>
@@ -110,7 +110,7 @@ To make the drawer slide in from the top, set the `placement` attribute to `top`
 <script>
   const drawer = document.querySelector('.drawer-placement-top');
   const openButton = drawer.nextElementSibling;
-  const closeButton = drawer.querySelector('sl-button[type="primary"]');
+  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
 
   openButton.addEventListener('click', () => drawer.show());
   closeButton.addEventListener('click', () => drawer.hide());
@@ -133,7 +133,7 @@ const App = () => {
         onSlAfterHide={() => setOpen(false)}
       >
         This drawer slides in from the top.
-        <SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
           Close
         </SlButton>
       </SlDrawer>
@@ -151,7 +151,7 @@ To make the drawer slide in from the bottom, set the `placement` attribute to `b
 ```html preview
 <sl-drawer label="Drawer" placement="bottom" class="drawer-placement-bottom">
   This drawer slides in from the bottom.
-  <sl-button slot="footer" type="primary">Close</sl-button>
+  <sl-button slot="footer" variant="primary">Close</sl-button>
 </sl-drawer>
 
 <sl-button>Open Drawer</sl-button>
@@ -159,7 +159,7 @@ To make the drawer slide in from the bottom, set the `placement` attribute to `b
 <script>
   const drawer = document.querySelector('.drawer-placement-bottom');
   const openButton = drawer.nextElementSibling;
-  const closeButton = drawer.querySelector('sl-button[type="primary"]');
+  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
 
   openButton.addEventListener('click', () => drawer.show());
   closeButton.addEventListener('click', () => drawer.hide());
@@ -182,7 +182,7 @@ const App = () => {
         onSlAfterHide={() => setOpen(false)}
       >
         This drawer slides in from the bottom.
-        <SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
           Close
         </SlButton>
       </SlDrawer>
@@ -205,7 +205,7 @@ By default, the drawer slides out of its [containing block](https://developer.mo
 
   <sl-drawer label="Drawer" contained class="drawer-contained" style="--size: 50%;">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    <sl-button slot="footer" type="primary">Close</sl-button>
+    <sl-button slot="footer" variant="primary">Close</sl-button>
   </sl-drawer>
 </div>
 
@@ -214,7 +214,7 @@ By default, the drawer slides out of its [containing block](https://developer.mo
 <script>
   const drawer = document.querySelector('.drawer-contained');
   const openButton = drawer.parentElement.nextElementSibling;
-  const closeButton = drawer.querySelector('sl-button[type="primary"]');
+  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
 
   openButton.addEventListener('click', () => drawer.show());
   closeButton.addEventListener('click', () => drawer.hide());
@@ -249,7 +249,7 @@ const App = () => {
           style={{ '--size': '50%' }}
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-          <SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
+          <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
             Close
           </SlButton>
         </SlDrawer>
@@ -268,7 +268,7 @@ Use the `--size` custom property to set the drawer's size. This will be applied
 ```html preview
 <sl-drawer label="Drawer" class="drawer-custom-size" style="--size: 50vw;">
   This drawer is always 50% of the viewport.
-  <sl-button slot="footer" type="primary">Close</sl-button>
+  <sl-button slot="footer" variant="primary">Close</sl-button>
 </sl-drawer>
 
 <sl-button>Open Drawer</sl-button>
@@ -276,7 +276,7 @@ Use the `--size` custom property to set the drawer's size. This will be applied
 <script>
   const drawer = document.querySelector('.drawer-custom-size');
   const openButton = drawer.nextElementSibling;
-  const closeButton = drawer.querySelector('sl-button[type="primary"]');
+  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
 
   openButton.addEventListener('click', () => drawer.show());
   closeButton.addEventListener('click', () => drawer.hide());
@@ -298,7 +298,7 @@ const App = () => {
         style={{ '--size': '50vw' }}
       >
         This drawer is always 50% of the viewport.
-        <SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
           Close
         </SlButton>
       </SlDrawer>
@@ -318,7 +318,7 @@ By design, a drawer's height will never exceed 100% of its container. As such, d
   <div style="height: 150vh; border: dashed 2px var(--sl-color-neutral-200); padding: 0 1rem;">
     <p>Scroll down and give it a try! 👇</p>
   </div>
-  <sl-button slot="footer" type="primary">Close</sl-button>
+  <sl-button slot="footer" variant="primary">Close</sl-button>
 </sl-drawer>
 
 <sl-button>Open Drawer</sl-button>
@@ -326,7 +326,7 @@ By design, a drawer's height will never exceed 100% of its container. As such, d
 <script>
   const drawer = document.querySelector('.drawer-scrolling');
   const openButton = drawer.nextElementSibling;
-  const closeButton = drawer.querySelector('sl-button[type="primary"]');
+  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
 
   openButton.addEventListener('click', () => drawer.show());
   closeButton.addEventListener('click', () => drawer.hide());
@@ -352,7 +352,7 @@ const App = () => {
         >
           <p>Scroll down and give it a try! 👇</p>
         </div>
-        <SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
           Close
         </SlButton>
       </SlDrawer>
@@ -373,7 +373,7 @@ To keep the drawer open in such cases, you can cancel the `sl-request-close` eve
 ```html preview
 <sl-drawer label="Drawer" class="drawer-deny-close">
   This drawer will not close unless you use the button below.
-  <sl-button slot="footer" type="primary">Save &amp; Close</sl-button>
+  <sl-button slot="footer" variant="primary">Save &amp; Close</sl-button>
 </sl-drawer>
 
 <sl-button>Open Drawer</sl-button>
@@ -381,7 +381,7 @@ To keep the drawer open in such cases, you can cancel the `sl-request-close` eve
 <script>
   const drawer = document.querySelector('.drawer-deny-close');
   const openButton = drawer.nextElementSibling;
-  const closeButton = drawer.querySelector('sl-button[type="primary"]');
+  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
 
   openButton.addEventListener('click', () => drawer.show());
   closeButton.addEventListener('click', () => drawer.hide());
@@ -406,7 +406,7 @@ const App = () => {
         onSlAfterHide={() => setOpen(false)}
       >
         This drawer will not close unless you use the button below.
-        <SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
           Save &amp; Close
         </SlButton>
       </SlDrawer>
@@ -424,7 +424,7 @@ By default, the drawer's panel will gain focus when opened. This allows the firs
 ```html preview
 <sl-drawer label="Drawer" class="drawer-focus">
   <sl-input placeholder="I will have focus when the drawer is opened"></sl-input>
-  <sl-button slot="footer" type="primary">Close</sl-button>
+  <sl-button slot="footer" variant="primary">Close</sl-button>
 </sl-drawer>
 
 <sl-button>Open Drawer</sl-button>
@@ -433,7 +433,7 @@ By default, the drawer's panel will gain focus when opened. This allows the firs
   const drawer = document.querySelector('.drawer-focus');
   const input = drawer.querySelector('sl-input');
   const openButton = drawer.nextElementSibling;
-  const closeButton = drawer.querySelector('sl-button[type="primary"]');
+  const closeButton = drawer.querySelector('sl-button[variant="primary"]');
 
   openButton.addEventListener('click', () => drawer.show());
   closeButton.addEventListener('click', () => drawer.hide());
@@ -471,7 +471,7 @@ const App = () => {
         onSlAfterHide={() => setOpen(false)}
       >
         <SlInput ref={input} placeholder="I will have focus when the drawer is opened" />
-        <SlButton slot="footer" type="primary" onClick={() => setOpen(false)}>
+        <SlButton slot="footer" variant="primary" onClick={() => setOpen(false)}>
           Close
         </SlButton>
       </SlDrawer>
diff --git a/docs/components/form.md b/docs/components/form.md
index 417a8a5a..9f6bc05b 100644
--- a/docs/components/form.md
+++ b/docs/components/form.md
@@ -12,7 +12,7 @@ Shoelace forms don't make use of `action` and `method` attributes and they don't
 
 ```html preview
 <sl-form class="form-overview">
-  <sl-input name="name" type="text" label="Name"></sl-input>
+  <sl-input name="name" variant="text" label="Name"></sl-input>
   <br>
   <sl-select name="favorite" label="Select your favorite">
     <sl-menu-item value="birds">Birds</sl-menu-item>
@@ -79,7 +79,7 @@ function handleSubmit(event) {
 
 const App = () => (
   <SlForm onSlSubmit={handleSubmit}>
-    <SlInput name="name" type="text" label="Name" />
+    <SlInput name="name" variant="text" label="Name" />
     <br />
     <SlSelect name="favorite" label="Select your favorite">
       <SlMenuItem value="birds">Birds</SlMenuItem>
@@ -104,8 +104,8 @@ On submit, a [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormD
 
 ```html preview
 <sl-form class="form-formdata">
-  <sl-input name="name" type="text" label="Name" required></sl-input>
-  <sl-input name="age" type="number" label="Age" required></sl-input>
+  <sl-input name="name" variant="text" label="Name" required></sl-input>
+  <sl-input name="age" variant="number" label="Age" required></sl-input>
   <br>
   <sl-button submit>Submit</sl-button>
 </sl-form>
@@ -147,8 +147,8 @@ const App = () => {
 
   return (
     <SlForm class="form-formdata" onSlSubmit={handleSubmit}>
-      <SlInput name="name" type="text" label="Name" required />
-      <SlInput name="age" type="number" label="Age" required />
+      <SlInput name="name" variant="text" label="Name" required />
+      <SlInput name="age" variant="number" label="Age" required />
       <br />
       <SlButton submit>Submit</SlButton>
     </SlForm>
@@ -198,7 +198,7 @@ To make a field required, use the `required` prop. The form will not be submitte
   <br>
   <sl-checkbox required>Check me before submitting</sl-checkbox>
   <br><br>
-  <sl-button type="primary" submit>Submit</sl-button>
+  <sl-button variant="primary" submit>Submit</sl-button>
 </sl-form>
 
 <script>
@@ -233,7 +233,7 @@ const App = () => (
     <br />
     <SlCheckbox required>Check me before submitting</SlCheckbox>
     <br /><br />
-    <SlButton type="primary" submit>Submit</SlButton>
+    <SlButton variant="primary" submit>Submit</SlButton>
   </SlForm>
 );
 ```
@@ -246,7 +246,7 @@ To restrict a value to a specific [pattern](https://developer.mozilla.org/en-US/
 <sl-form class="input-validation-pattern">
   <sl-input name="letters" required label="Letters" pattern="[A-Za-z]+"></sl-input>
   <br>
-  <sl-button type="primary" submit>Submit</sl-button>
+  <sl-button variant="primary" submit>Submit</sl-button>
 </sl-form>
 
 <script>
@@ -266,7 +266,7 @@ const App = () => (
   <SlForm onSlSubmit={() => alert('All fields are valid!')}>
     <SlInput name="letters" required label="Letters" pattern="[A-Za-z]+" />
     <br />
-    <SlButton type="primary" submit>Submit</SlButton>
+    <SlButton variant="primary" submit>Submit</SlButton>
   </SlForm>
 );
 ```
@@ -277,11 +277,11 @@ Some input types will automatically trigger constraints, such as `email` and `ur
 
 ```html preview
 <sl-form class="input-validation-type">
-  <sl-input type="email" label="Email" placeholder="you@example.com" required></sl-input>
+  <sl-input variant="email" label="Email" placeholder="you@example.com" required></sl-input>
   <br>
-  <sl-input type="url" label="URL" placeholder="https://example.com/" required></sl-input>
+  <sl-input variant="url" label="URL" placeholder="https://example.com/" required></sl-input>
   <br>
-  <sl-button type="primary" submit>Submit</sl-button>
+  <sl-button variant="primary" submit>Submit</sl-button>
 </sl-form>
 
 <script>
@@ -299,11 +299,11 @@ import {
 
 const App = () => (
   <SlForm onSlSubmit={() => alert('All fields are valid!')}>
-    <SlInput type="email" label="Email" placeholder="you@example.com" required />
+    <SlInput variant="email" label="Email" placeholder="you@example.com" required />
     <br />
-    <SlInput type="url" label="URL" placeholder="https://example.com/" required />
+    <SlInput variant="url" label="URL" placeholder="https://example.com/" required />
     <br />
-    <SlButton type="primary" submit>Submit</SlButton>
+    <SlButton variant="primary" submit>Submit</SlButton>
   </SlForm>
 );
 ```
@@ -316,7 +316,7 @@ To create a custom validation error, use the `setCustomValidity` method. The for
 <sl-form class="input-validation-custom">
   <sl-input label="Type 'shoelace'" required></sl-input>
   <br>
-  <sl-button type="primary" submit>Submit</sl-button>
+  <sl-button variant="primary" submit>Submit</sl-button>
 </sl-form>
 
 <script>
@@ -366,7 +366,7 @@ const App = () => {
         onSlInput={handleInput}
       />
       <br />
-      <SlButton type="primary" submit>Submit</SlButton>
+      <SlButton variant="primary" submit>Submit</SlButton>
     </SlForm>
   );
 };
diff --git a/docs/components/menu-item.md b/docs/components/menu-item.md
index ba788c6f..0af06b1b 100644
--- a/docs/components/menu-item.md
+++ b/docs/components/menu-item.md
@@ -141,7 +141,7 @@ Add content to the start and end of menu items using the `prefix` and `suffix` s
   <sl-menu-item>
     <sl-icon slot="prefix" name="envelope"></sl-icon>
     Messages
-    <sl-badge slot="suffix" type="primary" pill>12</sl-badge>
+    <sl-badge slot="suffix" variant="primary" pill>12</sl-badge>
   </sl-menu-item>
 
   <sl-divider></sl-divider>
@@ -178,7 +178,7 @@ const App = () => (
     <SlMenuItem>
       <SlIcon slot="prefix" name="envelope" />
       Messages
-      <SlBadge slot="suffix" type="primary" pill>12</SlBadge>
+      <SlBadge slot="suffix" variant="primary" pill>12</SlBadge>
     </SlMenuItem>
 
     <SlDivider />
diff --git a/docs/components/mutation-observer.md b/docs/components/mutation-observer.md
index da95e0d9..8560ed5a 100644
--- a/docs/components/mutation-observer.md
+++ b/docs/components/mutation-observer.md
@@ -9,7 +9,7 @@ The mutation observer will report changes to the content it wraps through the `s
 ```html preview
 <div class="mutation-overview">
   <sl-mutation-observer attr="type">
-    <sl-button type="primary">Click to mutate</sl-button>
+    <sl-button variant="primary">Click to mutate</sl-button>
   </sl-mutation-observer>
 
   <br>
@@ -74,7 +74,7 @@ const App = () => {
         attr="*"
         onSlMutation={event => console.log(event.detail)}
       >
-        <SlButton type={type} onClick={handleClick}>Click to mutate</SlButton>
+        <SlButton variant={type} onClick={handleClick}>Click to mutate</SlButton>
       </SlMutationObserver>
 
       <style>{css}</style>
@@ -95,7 +95,7 @@ Use the `child-list` attribute to watch for new child elements that are added or
 <div class="mutation-child-list">
   <sl-mutation-observer child-list>
     <div class="buttons">
-      <sl-button type="primary">Add button</sl-button>
+      <sl-button variant="primary">Add button</sl-button>
     </div>
   </sl-mutation-observer>
 
@@ -105,7 +105,7 @@ Use the `child-list` attribute to watch for new child elements that are added or
     const container = document.querySelector('.mutation-child-list');
     const mutationObserver = container.querySelector('sl-mutation-observer');
     const buttons = container.querySelector('.buttons');
-    const button = container.querySelector('sl-button[type="primary"]');
+    const button = container.querySelector('sl-button[variant="primary"]');
     let i = 0;
 
     // Add a button
@@ -117,7 +117,7 @@ Use the `child-list` attribute to watch for new child elements that are added or
 
     // Remove a button
     buttons.addEventListener('click', event => {
-      const target = event.target.closest('sl-button:not([type="primary"])');
+      const target = event.target.closest('sl-button:not([variant="primary"])');
       event.stopPropagation();
 
       if (target) {
@@ -176,9 +176,9 @@ const App = () => {
           onSlMutation={event => console.log(event.detail)}
         >
           <div className="buttons">
-            <SlButton type="primary" onClick={addButton}>Add button</SlButton>
+            <SlButton variant="primary" onClick={addButton}>Add button</SlButton>
             {buttonIds.map(id => (
-              <SlButton key={id} type="default" onClick={() => removeButton(id)}>
+              <SlButton key={id} variant="default" onClick={() => removeButton(id)}>
                 {id}
               </SlButton>
             ))}
diff --git a/docs/components/tag.md b/docs/components/tag.md
index 1ba69fbe..21bf50df 100644
--- a/docs/components/tag.md
+++ b/docs/components/tag.md
@@ -5,11 +5,11 @@
 Tags are used as labels to organize things or to indicate a selection.
 
 ```html preview
-<sl-tag type="primary">Primary</sl-tag>
-<sl-tag type="success">Success</sl-tag>
-<sl-tag type="neutral">Neutral</sl-tag>
-<sl-tag type="warning">Warning</sl-tag>
-<sl-tag type="danger">Danger</sl-tag>
+<sl-tag variant="primary">Primary</sl-tag>
+<sl-tag variant="success">Success</sl-tag>
+<sl-tag variant="neutral">Neutral</sl-tag>
+<sl-tag variant="warning">Warning</sl-tag>
+<sl-tag variant="danger">Danger</sl-tag>
 ```
 
 
@@ -18,11 +18,11 @@ import { SlTag } from '@shoelace-style/shoelace/dist/react';
 
 const App = () => (
   <>
-    <SlTag type="primary">Primary</SlTag>
-    <SlTag type="success">Success</SlTag>
-    <SlTag type="neutral">Neutral</SlTag>
-    <SlTag type="warning">Warning</SlTag>
-    <SlTag type="danger">Danger</SlTag> 
+    <SlTag variant="primary">Primary</SlTag>
+    <SlTag variant="success">Success</SlTag>
+    <SlTag variant="neutral">Neutral</SlTag>
+    <SlTag variant="warning">Warning</SlTag>
+    <SlTag variant="danger">Danger</SlTag> 
   </>
 );
 ```
diff --git a/docs/frameworks/react.md b/docs/frameworks/react.md
index c65ababd..693f96c7 100644
--- a/docs/frameworks/react.md
+++ b/docs/frameworks/react.md
@@ -34,7 +34,7 @@ Every Shoelace component is available to import as a React component. Note that
 import { SlButton } from '@shoelace-style/shoelace/dist/react';
 
 const MyComponent = () => (
-  <SlButton type="primary">
+  <SlButton variant="primary">
     Click me
   </SlButton>
 );
diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index f0868618..d66ad2d7 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -1,13 +1,14 @@
 # Changelog
 
-Shoelace follows [Semantic Versioning](https://semver.org/). Breaking changes in components with the <sl-badge type="primary" pill>Stable</sl-badge> badge will not be accepted until the next major version. As such, all contributions must consider the project's roadmap and take this into consideration. Features that are deemed no longer necessary will be deprecated but not removed.
+Shoelace follows [Semantic Versioning](https://semver.org/). Breaking changes in components with the <sl-badge variant="primary" pill>Stable</sl-badge> badge will not be accepted until the next major version. As such, all contributions must consider the project's roadmap and take this into consideration. Features that are deemed no longer necessary will be deprecated but not removed.
 
-Components with the <sl-badge type="warning" pill>Experimental</sl-badge> badge should not be used in production. They are made available as release candidates for development and testing purposes. As such, changes to experimental components will not be subject to semantic versioning.
+Components with the <sl-badge variant="warning" pill>Experimental</sl-badge> badge should not be used in production. They are made available as release candidates for development and testing purposes. As such, changes to experimental components will not be subject to semantic versioning.
 
 _During the beta period, these restrictions may be relaxed in the event of a mission-critical bug._ 🐛
 
 ## Next
 
+- 🚨 BREAKING: changed the `type` attribute to `variant` in `<sl-alert>`, `<sl-badge>`, `<sl-button>`, and `<sl-tag>` since it's more appropriate and to disambiguate from other `type` attributes
 - 🚨 BREAKING: removed `base` part from `<sl-divider>` to simplify the styling API
 - Fixed bug where setting `tooltipFormatter` on `<sl-range>` in JSX causes React@experimental to error out
 - Refactored `<sl-button>` to use Lit's static expressions to reduce code
diff --git a/docs/resources/community.md b/docs/resources/community.md
index b3a10b64..4a70ee27 100644
--- a/docs/resources/community.md
+++ b/docs/resources/community.md
@@ -13,7 +13,7 @@ The [discussion forum](https://github.com/shoelace-style/shoelace/discussions) i
 - Show the community what you're working on
 - Learn more about the project, its values, and its roadmap
 
-<sl-button type="primary" href="https://github.com/shoelace-style/shoelace/discussions" target="_blank">
+<sl-button variant="primary" href="https://github.com/shoelace-style/shoelace/discussions" target="_blank">
   <sl-icon name="github" slot="prefix"></sl-icon>
   Join the Discussion
 </sl-button>
@@ -27,7 +27,7 @@ The [community chat](https://discord.gg/mg8f26C) is open to the public and power
 - Show the community what you're working on
 - Chat live with other designers, developers, and Shoelace fans
 
-<sl-button type="primary" href="https://discord.gg/mg8f26C" target="_blank">
+<sl-button variant="primary" href="https://discord.gg/mg8f26C" target="_blank">
   <sl-icon name="discord" slot="prefix"></sl-icon>
   Join the Chat
 </sl-button>
@@ -36,7 +36,7 @@ The [community chat](https://discord.gg/mg8f26C) is open to the public and power
 
 You can post questions on Stack Overflow using [the "shoelace" tag](https://stackoverflow.com/questions/tagged/shoelace). This is a public forum where talented developers answer questions. It's a great way to get help, but it is not maintained by the Shoelace author.
 
-<sl-button type="primary" href="https://stackoverflow.com/questions/ask?tags=shoelace" target="_blank">
+<sl-button variant="primary" href="https://stackoverflow.com/questions/ask?tags=shoelace" target="_blank">
   <sl-icon name="stack-overflow" slot="prefix"></sl-icon>
   Ask for Help
 </sl-button>
@@ -47,7 +47,7 @@ Follow [@shoelace_style](https://twitter.com/shoelace_style) on Twitter for gene
 
 **Please avoid using Twitter for support questions.** The [discussion forum](https://github.com/shoelace-style/shoelace/discussions) is a much better place to share code snippets, screenshots, and other troubleshooting info. You'll have much better luck there, as more users will have a chance to help you.
 
-<sl-button type="primary" href="https://twitter.com/shoelace_style" target="_blank">
+<sl-button variant="primary" href="https://twitter.com/shoelace_style" target="_blank">
   <sl-icon name="twitter" slot="prefix"></sl-icon>
   Follow on Twitter
 </sl-button>
diff --git a/src/components/alert/alert.ts b/src/components/alert/alert.ts
index 901401fa..f41ce6ca 100644
--- a/src/components/alert/alert.ts
+++ b/src/components/alert/alert.ts
@@ -51,8 +51,8 @@ export default class SlAlert extends LitElement {
   /** Makes the alert closable. */
   @property({ type: Boolean, reflect: true }) closable = false;
 
-  /** The type of alert. */
-  @property({ reflect: true }) type: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' = 'primary';
+  /** The alert's variant. */
+  @property({ reflect: true }) variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' = 'primary';
 
   /**
    * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with
@@ -178,11 +178,11 @@ export default class SlAlert extends LitElement {
           alert: true,
           'alert--open': this.open,
           'alert--closable': this.closable,
-          'alert--primary': this.type === 'primary',
-          'alert--success': this.type === 'success',
-          'alert--neutral': this.type === 'neutral',
-          'alert--warning': this.type === 'warning',
-          'alert--danger': this.type === 'danger'
+          'alert--primary': this.variant === 'primary',
+          'alert--success': this.variant === 'success',
+          'alert--neutral': this.variant === 'neutral',
+          'alert--warning': this.variant === 'warning',
+          'alert--danger': this.variant === 'danger'
         })}
         role="alert"
         aria-live="assertive"
diff --git a/src/components/badge/badge.styles.ts b/src/components/badge/badge.styles.ts
index fca547b0..9279e6ff 100644
--- a/src/components/badge/badge.styles.ts
+++ b/src/components/badge/badge.styles.ts
@@ -24,7 +24,7 @@ export default css`
     cursor: inherit;
   }
 
-  /* Type modifiers */
+  /* Variant modifiers */
   .badge--primary {
     background-color: var(--sl-color-primary-600);
     color: var(--sl-color-neutral-0);
diff --git a/src/components/badge/badge.test.ts b/src/components/badge/badge.test.ts
index eaaea1b8..68cc3bae 100644
--- a/src/components/badge/badge.test.ts
+++ b/src/components/badge/badge.test.ts
@@ -58,10 +58,10 @@ describe('<sl-badge>', () => {
     });
   });
 
-  ['primary', 'success', 'neutral', 'warning', 'danger'].forEach(type => {
-    describe(`when passed a type attribute ${type}`, () => {
+  ['primary', 'success', 'neutral', 'warning', 'danger'].forEach(variant => {
+    describe(`when passed a variant attribute ${variant}`, () => {
       before(async () => {
-        el = await fixture<SlBadge>(html`<sl-badge type="${type as any}">Badge</sl-badge>`);
+        el = await fixture<SlBadge>(html`<sl-badge variant="${variant as any}">Badge</sl-badge>`);
       });
 
       it('should render a component that passes accessibility test', async () => {
@@ -70,7 +70,7 @@ describe('<sl-badge>', () => {
 
       it('should default to square styling, with the primary color', async () => {
         const part = el.shadowRoot?.querySelector('[part="base"]') as HTMLElement;
-        expect(part.classList.value.trim()).to.eq(`badge badge--${type}`);
+        expect(part.classList.value.trim()).to.eq(`badge badge--${variant}`);
       });
     });
   });
diff --git a/src/components/badge/badge.ts b/src/components/badge/badge.ts
index 9b874a46..dcd40a49 100644
--- a/src/components/badge/badge.ts
+++ b/src/components/badge/badge.ts
@@ -15,8 +15,8 @@ import styles from './badge.styles';
 export default class SlBadge extends LitElement {
   static styles = styles;
 
-  /** The badge's type. */
-  @property({ reflect: true }) type: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' = 'primary';
+  /** The badge's variant. */
+  @property({ reflect: true }) variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' = 'primary';
 
   /** Draws a pill-style badge with rounded edges. */
   @property({ type: Boolean, reflect: true }) pill = false;
@@ -30,11 +30,11 @@ export default class SlBadge extends LitElement {
         part="base"
         class=${classMap({
           badge: true,
-          'badge--primary': this.type === 'primary',
-          'badge--success': this.type === 'success',
-          'badge--neutral': this.type === 'neutral',
-          'badge--warning': this.type === 'warning',
-          'badge--danger': this.type === 'danger',
+          'badge--primary': this.variant === 'primary',
+          'badge--success': this.variant === 'success',
+          'badge--neutral': this.variant === 'neutral',
+          'badge--warning': this.variant === 'warning',
+          'badge--danger': this.variant === 'danger',
           'badge--pill': this.pill,
           'badge--pulse': this.pulse
         })}
diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts
index 3d3d3d9d..67b16609 100644
--- a/src/components/button/button.styles.ts
+++ b/src/components/button/button.styles.ts
@@ -618,7 +618,7 @@ export default css`
   }
 
   /* Add a visual separator between solid buttons */
-  :host(.sl-button-group__button:not(.sl-button-group__button--focus, .sl-button-group__button--first, [type='default']):not(:hover, :active, :focus))
+  :host(.sl-button-group__button:not(.sl-button-group__button--focus, .sl-button-group__button--first, [variant='default']):not(:hover, :active, :focus))
     .button:after {
     content: '';
     position: absolute;
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index 5617b002..c579d922 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -39,8 +39,8 @@ export default class SlButton extends LitElement {
   @state() private hasPrefix = false;
   @state() private hasSuffix = false;
 
-  /** The button's type. */
-  @property({ reflect: true }) type: 'default' | 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text' =
+  /** The button's variant. */
+  @property({ reflect: true }) variant: 'default' | 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text' =
     'default';
 
   /** The button's size. */
@@ -134,13 +134,13 @@ export default class SlButton extends LitElement {
         part="base"
         class=${classMap({
           button: true,
-          'button--default': this.type === 'default',
-          'button--primary': this.type === 'primary',
-          'button--success': this.type === 'success',
-          'button--neutral': this.type === 'neutral',
-          'button--warning': this.type === 'warning',
-          'button--danger': this.type === 'danger',
-          'button--text': this.type === 'text',
+          'button--default': this.variant === 'default',
+          'button--primary': this.variant === 'primary',
+          'button--success': this.variant === 'success',
+          'button--neutral': this.variant === 'neutral',
+          'button--warning': this.variant === 'warning',
+          'button--danger': this.variant === 'danger',
+          'button--text': this.variant === 'text',
           'button--small': this.size === 'small',
           'button--medium': this.size === 'medium',
           'button--large': this.size === 'large',
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index e113139d..f36aeed3 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -380,7 +380,7 @@ export default class SlSelect extends LitElement {
         return html`
           <sl-tag
             exportparts="base:tag"
-            type="neutral"
+            variant="neutral"
             size=${this.size}
             ?pill=${this.pill}
             removable
@@ -404,7 +404,7 @@ export default class SlSelect extends LitElement {
         this.displayLabel = '';
         this.displayTags = this.displayTags.slice(0, this.maxTagsVisible);
         this.displayTags.push(html`
-          <sl-tag exportparts="base:tag" type="neutral" size=${this.size}> +${total - this.maxTagsVisible} </sl-tag>
+          <sl-tag exportparts="base:tag" variant="neutral" size=${this.size}> +${total - this.maxTagsVisible} </sl-tag>
         `);
       }
     } else {
diff --git a/src/components/tag/tag.styles.ts b/src/components/tag/tag.styles.ts
index 695e0d37..b788dbe6 100644
--- a/src/components/tag/tag.styles.ts
+++ b/src/components/tag/tag.styles.ts
@@ -24,7 +24,7 @@ export default css`
   }
 
   /*
-   * Type modifiers
+   * Variant modifiers
    */
 
   .tag--primary {
diff --git a/src/components/tag/tag.ts b/src/components/tag/tag.ts
index 2e72d077..3c5f4344 100644
--- a/src/components/tag/tag.ts
+++ b/src/components/tag/tag.ts
@@ -24,8 +24,8 @@ import '../icon-button/icon-button';
 export default class SlTag extends LitElement {
   static styles = styles;
 
-  /** The tag's type. */
-  @property({ reflect: true }) type: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text' = 'neutral';
+  /** The tag's variant. */
+  @property({ reflect: true }) variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text' = 'neutral';
 
   /** The tag's size. */
   @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
@@ -48,12 +48,12 @@ export default class SlTag extends LitElement {
           tag: true,
 
           // Types
-          'tag--primary': this.type === 'primary',
-          'tag--success': this.type === 'success',
-          'tag--neutral': this.type === 'neutral',
-          'tag--warning': this.type === 'warning',
-          'tag--danger': this.type === 'danger',
-          'tag--text': this.type === 'text',
+          'tag--primary': this.variant === 'primary',
+          'tag--success': this.variant === 'success',
+          'tag--neutral': this.variant === 'neutral',
+          'tag--warning': this.variant === 'warning',
+          'tag--danger': this.variant === 'danger',
+          'tag--text': this.variant === 'text',
 
           // Sizes
           'tag--small': this.size === 'small',