diff --git a/button.css b/button.css
index 835d0da..9c56a4c 100644
--- a/button.css
+++ b/button.css
@@ -64,14 +64,14 @@
   }
 }
 
-.dads-button[dads-type="outline"] {
+.dads-button[dads-type="outlined"] {
   border: 1px solid currentcolor;
   background-color: var(--color-neutral-white);
   color: var(--button-color);
 }
 
 @media (hover: hover) {
-  .dads-button[dads-type="outline"]:hover {
+  .dads-button[dads-type="outlined"]:hover {
     background-color: var(--button-outline-hover-bg-color);
     color: var(--button-hover-color);
     text-decoration: underline;
@@ -79,28 +79,28 @@
   }
 }
 
-.dads-button[dads-type="outline"]:active {
+.dads-button[dads-type="outlined"]:active {
   background-color: var(--button-outline-active-bg-color);
   color: var(--button-active-color);
   text-decoration: underline;
 }
 
-.dads-button[dads-type="outline"]:focus-visible {
+.dads-button[dads-type="outlined"]:focus-visible {
   outline: calc(4 / 16 * 1rem) solid var(--color-neutral-black);
   outline-offset: calc(2 / 16 * 1rem);
   box-shadow: 0 0 0 calc(2 / 16 * 1rem) var(--color-primitive-yellow-300);
 }
 
-.dads-button[dads-type="outline"]:disabled,
-.dads-button[dads-type="outline"][aria-disabled="true"] {
+.dads-button[dads-type="outlined"]:disabled,
+.dads-button[dads-type="outlined"][aria-disabled="true"] {
   background-color: var(--color-neutral-white);
   color: var(--color-neutral-solid-gray-300);
   text-decoration: none;
 }
 
 @media (forced-colors: active) {
-  .dads-button[dads-type="outline"]:disabled,
-  .dads-button[dads-type="outline"][aria-disabled="true"] {
+  .dads-button[dads-type="outlined"]:disabled,
+  .dads-button[dads-type="outlined"][aria-disabled="true"] {
     border-color: GrayText;
     color: GrayText;
   }
diff --git a/chip-label.css b/chip-label.css
index d19845e..153275a 100644
--- a/chip-label.css
+++ b/chip-label.css
@@ -20,8 +20,9 @@
   color: var(--_text, #000);
 }
 
-.dads-chip-label[dads-type="outline"] {
+.dads-chip-label[dads-type="outlined"] {
   border: 1px solid var(--_non-text, #000);
+  background-color: var(--color-neutral-white, #fff);
   color: var(--_text, #000);
 }
 
diff --git a/file-upload/file-upload.css b/file-upload/file-upload.css
index 2f76d4d..fa56092 100644
--- a/file-upload/file-upload.css
+++ b/file-upload/file-upload.css
@@ -58,7 +58,7 @@
   text-decoration: underline;
 }
 
-.dads-file-upload[dads-error] .dads-button[dads-type="outline"] {
+.dads-file-upload[dads-error] .dads-button[dads-type="outlined"] {
   border-color: var(--color-semantic-error-1);
 }
 
diff --git a/index.html b/index.html
index 4448ab6..3b05336 100644
--- a/index.html
+++ b/index.html
@@ -274,11 +274,11 @@ <h2>Button</h2>
   <div><button class="dads-button" dads-size="md" dads-type="fill">ボタン</button></div>
   <div><button class="dads-button" dads-size="sm" dads-type="fill">ボタン</button></div>
   <div><button class="dads-button" dads-size="xs" dads-type="fill">ボタン</button></div>
-  <div><button class="dads-button" dads-size="lg" dads-type="outline">ボタン</button></div>
-  <div><button class="dads-button" dads-size="lg" dads-type="outline" disabled>ボタン</button></div>
-  <div><button class="dads-button" dads-size="md" dads-type="outline">ボタン</button></div>
-  <div><button class="dads-button" dads-size="sm" dads-type="outline">ボタン</button></div>
-  <div><button class="dads-button" dads-size="xs" dads-type="outline">ボタン</button></div>
+  <div><button class="dads-button" dads-size="lg" dads-type="outlined">ボタン</button></div>
+  <div><button class="dads-button" dads-size="lg" dads-type="outlined" disabled>ボタン</button></div>
+  <div><button class="dads-button" dads-size="md" dads-type="outlined">ボタン</button></div>
+  <div><button class="dads-button" dads-size="sm" dads-type="outlined">ボタン</button></div>
+  <div><button class="dads-button" dads-size="xs" dads-type="outlined">ボタン</button></div>
   <div><button class="dads-button" dads-size="lg" dads-type="text">ボタン</button></div>
   <div><button class="dads-button" dads-size="lg" dads-type="text" disabled>ボタン</button></div>
   <div><button class="dads-button" dads-size="md" dads-type="text">ボタン</button></div>
@@ -306,13 +306,13 @@ <h2>Calendar</h2>
   <div class="dads-calendar__controls">
     <select class="dads-select" dads-size="sm" aria-label="年" data-js-year-select></select>
     <div class="dads-calendar__navigation">
-      <button class="dads-button dads-calendar__nav-button" dads-size="sm" dads-type="outline" data-js-prev-month-button>
+      <button class="dads-button dads-calendar__nav-button" dads-size="sm" dads-type="outlined" data-js-prev-month-button>
         <svg width="16" height="16" viewBox="0 0 16 16" role="img" aria-label="前の月">
           <path d="m5.27 8 5.33-5.33-.93-.94L3.4 8l6.27 6.27.93-.94L5.27 8Z" fill="currentcolor"/>
         </svg>
       </button>
       <p class="dads-calendar__current-month" data-js-current-month></p>
-      <button class="dads-button dads-calendar__nav-button" dads-size="sm" dads-type="outline" data-js-next-month-button>
+      <button class="dads-button dads-calendar__nav-button" dads-size="sm" dads-type="outlined" data-js-next-month-button>
         <svg width="16" height="16" viewBox="0 0 16 16" role="img" aria-label="次の月">
           <path d="m6 1.73-.93.94L10.4 8l-5.33 5.33.93.94L12.27 8 6 1.73Z" fill="currentcolor"/>
         </svg>
@@ -341,7 +341,7 @@ <h2>Calendar</h2>
   </table>
   <div class="dads-calendar__footer">
     <button class="dads-button" dads-size="sm" dads-type="text" data-js-delete-button>削除</button>
-    <button class="dads-button" dads-size="sm" dads-type="outline" data-js-today-button>今日</button>
+    <button class="dads-button" dads-size="sm" dads-type="outlined" data-js-today-button>今日</button>
   </div>
 </dads-calendar>
 
@@ -483,7 +483,7 @@ <h2 class="dads-card-example-3__title">
         </div>
         <ul class="dads-card-example-3__actions">
           <li>
-            <button class="dads-button" type="button" dads-size="sm" dads-type="outline">
+            <button class="dads-button" type="button" dads-size="sm" dads-type="outlined">
               <svg class="dads-button__icon" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true"><path d="m12 21-1.4-1.3a113 113 0 0 1-6.8-6.9 9 9 0 0 1-1.4-2.4Q2 9.3 2 8.2q0-2.4 1.6-4Q5 2.7 7.5 2.7a6 6 0 0 1 4.5 2 6 6 0 0 1 4.5-2q2.4 0 4 1.5 1.5 1.5 1.5 4 0 1.1-.4 2.2-.3 1-1.4 2.4t-2.6 3l-4.2 3.9zm0-2.7 6.4-6.4q.9-1 1.3-2l.3-1.7a3.4 3.4 0 0 0-3.5-3.5A4 4 0 0 0 12.9 7h-1.8q-.5-1-1.4-1.7-1-.6-2.2-.6A3.4 3.4 0 0 0 4 8.2l.3 1.7q.4 1 1.3 2 .9 1.2 2.5 2.7z" fill="currentcolor"/></svg>
               お気に入り
             </button>
@@ -514,7 +514,7 @@ <h2 class="dads-card-example-3__title">
         </div>
         <ul class="dads-card-example-3__actions">
           <li>
-            <button class="dads-button" type="button" dads-size="sm" dads-type="outline">
+            <button class="dads-button" type="button" dads-size="sm" dads-type="outlined">
               <svg class="dads-button__icon" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true"><path d="m12 21-1.4-1.3a113 113 0 0 1-6.8-6.9 9 9 0 0 1-1.4-2.4Q2 9.3 2 8.2q0-2.4 1.6-4Q5 2.7 7.5 2.7a6 6 0 0 1 4.5 2 6 6 0 0 1 4.5-2q2.4 0 4 1.5 1.5 1.5 1.5 4 0 1.1-.4 2.2-.3 1-1.4 2.4t-2.6 3l-4.2 3.9zm0-2.7 6.4-6.4q.9-1 1.3-2l.3-1.7a3.4 3.4 0 0 0-3.5-3.5A4 4 0 0 0 12.9 7h-1.8q-.5-1-1.4-1.7-1-.6-2.2-.6A3.4 3.4 0 0 0 4 8.2l.3 1.7q.4 1 1.3 2 .9 1.2 2.5 2.7z" fill="currentcolor"/></svg>
               お気に入り
             </button>
@@ -547,7 +547,7 @@ <h2 class="dads-card-example-4__heading">アジア地域における交通問題
         <svg width="415" height="235" viewBox="0 0 415 235" role="img" aria-label="中国の都市部の通りを多くの人々が自転車やバイクで行き交う様子" style="display:block;max-width:100%;height:auto"><rect width="415" height="235" fill="#c8d0d8"/><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="#6b7280" font-size="16" font-family="sans-serif">415×235</text></svg>
       </div>
       <ul class="dads-card-example-4__actions">
-        <li><a class="dads-button" href="#" dads-size="sm" dads-type="outline">関連情報</a></li>
+        <li><a class="dads-button" href="#" dads-size="sm" dads-type="outlined">関連情報</a></li>
         <li><a class="dads-button" href="#" dads-size="sm" dads-type="fill">詳しくみる</a></li>
       </ul>
     </div>
@@ -568,7 +568,7 @@ <h2 class="dads-card-example-4__heading">持続可能な都市開発の最新動
         <svg width="415" height="235" viewBox="0 0 415 235" role="img" aria-label="中国の都市部の通りを多くの人々が自転車やバイクで行き交う様子" style="display:block;max-width:100%;height:auto"><rect width="415" height="235" fill="#c8d0d8"/><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="#6b7280" font-size="16" font-family="sans-serif">415×235</text></svg>
       </div>
       <ul class="dads-card-example-4__actions">
-        <li><a class="dads-button" href="#" dads-size="sm" dads-type="outline">関連情報</a></li>
+        <li><a class="dads-button" href="#" dads-size="sm" dads-type="outlined">関連情報</a></li>
         <li><a class="dads-button" href="#" dads-size="sm" dads-type="fill">詳しくみる</a></li>
       </ul>
     </div>
@@ -597,7 +597,7 @@ <h2 class="dads-card-example-5__heading">
       <div class="dads-card-example-5__sub">
         <div class="dads-card-example-5__contents">大自然の中で野鳥を観察できます。ガイド付きで安心してご参加いただけます。</div>
         <ul class="dads-card-example-5__actions">
-          <li><button class="dads-button" type="button" dads-size="sm" dads-type="outline">共有する</button></li>
+          <li><button class="dads-button" type="button" dads-size="sm" dads-type="outlined">共有する</button></li>
           <li><button class="dads-button" type="button" dads-size="sm" dads-type="fill">あとで読む</button></li>
         </ul>
       </div>
@@ -619,7 +619,7 @@ <h2 class="dads-card-example-5__heading">
       <div class="dads-card-example-5__sub">
         <div class="dads-card-example-5__contents">美しい山間の温泉で心身ともにリフレッシュ。地元の食材を使った料理もお楽しみいただけます。</div>
         <ul class="dads-card-example-5__actions">
-          <li><button class="dads-button" type="button" dads-size="sm" dads-type="outline">共有する</button></li>
+          <li><button class="dads-button" type="button" dads-size="sm" dads-type="outlined">共有する</button></li>
           <li><button class="dads-button" type="button" dads-size="sm" dads-type="fill">あとで読む</button></li>
         </ul>
       </div>
@@ -877,17 +877,17 @@ <h3 style="font: bold 1rem/2 sans-serif; margin: 0 0 0.5rem;">text</h3>
 
 <h3 style="font: bold 1rem/2 sans-serif; margin: 0 0 0.5rem;">outline</h3>
 <div class="chip-label-grid">
-  <span class="dads-chip-label" dads-type="outline" data-color="gray">gray</span>
-  <span class="dads-chip-label" dads-type="outline" data-color="blue">blue</span>
-  <span class="dads-chip-label" dads-type="outline" data-color="light-blue">light-blue</span>
-  <span class="dads-chip-label" dads-type="outline" data-color="cyan">cyan</span>
-  <span class="dads-chip-label" dads-type="outline" data-color="green">green</span>
-  <span class="dads-chip-label" dads-type="outline" data-color="lime">lime</span>
-  <span class="dads-chip-label" dads-type="outline" data-color="yellow">yellow</span>
-  <span class="dads-chip-label" dads-type="outline" data-color="orange">orange</span>
-  <span class="dads-chip-label" dads-type="outline" data-color="red">red</span>
-  <span class="dads-chip-label" dads-type="outline" data-color="magenta">magenta</span>
-  <span class="dads-chip-label" dads-type="outline" data-color="purple">purple</span>
+  <span class="dads-chip-label" dads-type="outlined" data-color="gray">gray</span>
+  <span class="dads-chip-label" dads-type="outlined" data-color="blue">blue</span>
+  <span class="dads-chip-label" dads-type="outlined" data-color="light-blue">light-blue</span>
+  <span class="dads-chip-label" dads-type="outlined" data-color="cyan">cyan</span>
+  <span class="dads-chip-label" dads-type="outlined" data-color="green">green</span>
+  <span class="dads-chip-label" dads-type="outlined" data-color="lime">lime</span>
+  <span class="dads-chip-label" dads-type="outlined" data-color="yellow">yellow</span>
+  <span class="dads-chip-label" dads-type="outlined" data-color="orange">orange</span>
+  <span class="dads-chip-label" dads-type="outlined" data-color="red">red</span>
+  <span class="dads-chip-label" dads-type="outlined" data-color="magenta">magenta</span>
+  <span class="dads-chip-label" dads-type="outlined" data-color="purple">purple</span>
 </div>
 
 <h3 style="font: bold 1rem/2 sans-serif; margin: 0 0 0.5rem;">filled-outline</h3>
@@ -967,13 +967,13 @@ <h2>Date Picker</h2>
         <div class="dads-calendar__controls">
           <select class="dads-select" dads-size="sm" aria-label="年" data-js-year-select></select>
           <div class="dads-calendar__navigation">
-            <button class="dads-button dads-calendar__nav-button" dads-size="sm" dads-type="outline" data-js-prev-month-button>
+            <button class="dads-button dads-calendar__nav-button" dads-size="sm" dads-type="outlined" data-js-prev-month-button>
               <svg width="16" height="16" viewBox="0 0 16 16" role="img" aria-label="前の月">
                 <path d="m5.27 8 5.33-5.33-.93-.94L3.4 8l6.27 6.27.93-.94L5.27 8Z" fill="currentcolor"/>
               </svg>
             </button>
             <p class="dads-calendar__current-month" data-js-current-month></p>
-            <button class="dads-button dads-calendar__nav-button" dads-size="sm" dads-type="outline" data-js-next-month-button>
+            <button class="dads-button dads-calendar__nav-button" dads-size="sm" dads-type="outlined" data-js-next-month-button>
               <svg width="16" height="16" viewBox="0 0 16 16" role="img" aria-label="次の月">
                 <path d="m6 1.73-.93.94L10.4 8l-5.33 5.33.93.94L12.27 8 6 1.73Z" fill="currentcolor"/>
               </svg>
@@ -1002,7 +1002,7 @@ <h2>Date Picker</h2>
         </table>
         <div class="dads-calendar__footer">
           <button class="dads-button" dads-size="sm" dads-type="text" data-js-delete-button>削除</button>
-          <button class="dads-button" dads-size="sm" dads-type="outline" data-js-today-button>今日</button>
+          <button class="dads-button" dads-size="sm" dads-type="outlined" data-js-today-button>今日</button>
         </div>
       </dads-calendar>
     </div>
@@ -1428,7 +1428,7 @@ <h2>File Upload</h2>
       <button
         id="file-upload-1-button"
         class="dads-button"
-        dads-type="outline"
+        dads-type="outlined"
         type="button"
         aria-labelledby="file-upload-1-label file-upload-1-button"
         aria-describedby="file-upload-1-selected-files file-upload-1-error-messages file-upload-1-support-text"
@@ -1490,7 +1490,7 @@ <h3 style="font: bold 1rem/2 sans-serif; margin: 3rem 0 0.5rem;">単一ファイ
     <button
       id="file-upload-2-button"
       class="dads-button"
-      dads-type="outline"
+      dads-type="outlined"
       type="button"
       aria-labelledby="file-upload-2-label file-upload-2-button"
       aria-describedby="file-upload-2-error-messages"
@@ -1978,7 +1978,7 @@ <h2 class="dads-notification-banner__heading">
     <p>入力内容を確認して再度お試しください。</p>
   </div>
   <div class="dads-notification-banner__actions">
-    <button class="dads-button" dads-size="md" dads-type="outline">キャンセル</button>
+    <button class="dads-button" dads-size="md" dads-type="outlined">キャンセル</button>
     <button class="dads-button" dads-size="md" dads-type="fill">再試行</button>
   </div>
 </div>