From 8db516e77d5df7bd7e0cbfc53d362e0bcf4b014f Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Fri, 22 Nov 2024 01:48:27 +0900
Subject: [PATCH] Replace sizes section

---
 packages/components/src/button/stories/best-practices.mdx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/button/stories/best-practices.mdx b/packages/components/src/button/stories/best-practices.mdx
index a09ef69136da4..0d933f6a3c658 100644
--- a/packages/components/src/button/stories/best-practices.mdx
+++ b/packages/components/src/button/stories/best-practices.mdx
@@ -47,7 +47,10 @@ Use this variant for irreversible actions. Apply sparingly and only for actions
 <FigmaEmbed url="https://www.figma.com/design/V7NfxdP0ybEMXf01WyWGKB/Storybook-documentation-Figma-assets?node-id=5-1069&node-type=frame&t=HfUDxJShbqa3dM4N-11" title="isDestructive prop enabled" height="400" />
 
 ### Sizes
-The default size is 40px. Use smaller sizes for compact views or when placing buttons in small components, such as dropdowns or dialogs.
+
+- `'default'`: For normal text-label buttons, unless it is a toggle button.
+- `'compact'`: For toggle buttons, icon buttons, and buttons when used in context of either.
+- `'small'`: For icon buttons associated with more advanced or auxiliary features.
 
 ## Best practices