@ceed/cds 1.34.1 → 1.36.0

package/dist/components/inputs/IconButton.md

@@ -46,27 +46,29 @@ function MyComponent() {
 IconButton supports five semantic colors: `primary` (default), `neutral`, `danger`, `success`, and `warning`. Choose a color that reflects the nature of the action.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '1rem',
-  alignItems: 'center'
-}}>
-<IconButton color="primary">
-  <Add />
-</IconButton>
-<IconButton color="neutral">
-  <Edit />
-</IconButton>
-<IconButton color="danger">
-  <Delete />
-</IconButton>
-<IconButton color="success">
-  <FavoriteIcon />
-</IconButton>
-<IconButton color="warning">
-  <Settings />
-</IconButton>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "1rem",
+      alignItems: "center"
+    }}
+  >
+    <IconButton color="primary">
+      <Add />
+    </IconButton>
+    <IconButton color="neutral">
+      <Edit />
+    </IconButton>
+    <IconButton color="danger">
+      <Delete />
+    </IconButton>
+    <IconButton color="success">
+      <FavoriteIcon />
+    </IconButton>
+    <IconButton color="warning">
+      <Settings />
+    </IconButton>
+  </div>
 ```
 
 ## Variants
@@ -74,24 +76,26 @@ IconButton supports five semantic colors: `primary` (default), `neutral`, `dange
 Four visual variants are available: `solid` (filled background), `soft` (tinted background), `outlined` (border only), and `plain` (no background). Use `outlined` or `plain` for secondary actions, and `solid` for primary or high-emphasis actions.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '1rem',
-  alignItems: 'center'
-}}>
-<IconButton variant="solid">
-  <Add />
-</IconButton>
-<IconButton variant="soft">
-  <Add />
-</IconButton>
-<IconButton variant="outlined">
-  <Add />
-</IconButton>
-<IconButton variant="plain">
-  <Add />
-</IconButton>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "1rem",
+      alignItems: "center"
+    }}
+  >
+    <IconButton variant="solid">
+      <Add />
+    </IconButton>
+    <IconButton variant="soft">
+      <Add />
+    </IconButton>
+    <IconButton variant="outlined">
+      <Add />
+    </IconButton>
+    <IconButton variant="plain">
+      <Add />
+    </IconButton>
+  </div>
 ```
 
 ## Sizes
@@ -99,21 +103,23 @@ Four visual variants are available: `solid` (filled background), `soft` (tinted
 The `size` prop controls the button dimensions. Available sizes are `sm`, `md` (default), and `lg`. Ensure touch targets meet the minimum 44px recommended size for touch interfaces.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '1rem',
-  alignItems: 'center'
-}}>
-<IconButton size="sm">
-  <Add />
-</IconButton>
-<IconButton size="md">
-  <Add />
-</IconButton>
-<IconButton size="lg">
-  <Add />
-</IconButton>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "1rem",
+      alignItems: "center"
+    }}
+  >
+    <IconButton size="sm">
+      <Add />
+    </IconButton>
+    <IconButton size="md">
+      <Add />
+    </IconButton>
+    <IconButton size="lg">
+      <Add />
+    </IconButton>
+  </div>
 ```
 
 ## States
@@ -121,57 +127,65 @@ The `size` prop controls the button dimensions. Available sizes are `sm`, `md` (
 IconButton supports multiple interactive states including normal, disabled, and loading. Use `disabled` to prevent interaction and `loading` to indicate an in-progress async operation.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '2rem',
-  alignItems: 'center'
-}}>
-<div>
-  <h4>Normal</h4>
-  <div style={{
-    display: 'flex',
-    gap: '1rem',
-    alignItems: 'center'
-  }}>
-  <IconButton>
-    <Add />
-  </IconButton>
-  <IconButton color="danger">
-    <Delete />
-  </IconButton>
-</div>
-</div>
-<div>
-  <h4>Disabled</h4>
-  <div style={{
-    display: 'flex',
-    gap: '1rem',
-    alignItems: 'center'
-  }}>
-  <IconButton disabled>
-    <Add />
-  </IconButton>
-  <IconButton disabled color="danger">
-    <Delete />
-  </IconButton>
-</div>
-</div>
-<div>
-  <h4>Loading</h4>
-  <div style={{
-    display: 'flex',
-    gap: '1rem',
-    alignItems: 'center'
-  }}>
-  <IconButton loading>
-    <Add />
-  </IconButton>
-  <IconButton loading color="danger">
-    <Delete />
-  </IconButton>
-</div>
-</div>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "2rem",
+      alignItems: "center"
+    }}
+  >
+    <div>
+      <h4>Normal</h4>
+      <div
+        style={{
+          display: "flex",
+          gap: "1rem",
+          alignItems: "center"
+        }}
+      >
+        <IconButton>
+          <Add />
+        </IconButton>
+        <IconButton color="danger">
+          <Delete />
+        </IconButton>
+      </div>
+    </div>
+    <div>
+      <h4>Disabled</h4>
+      <div
+        style={{
+          display: "flex",
+          gap: "1rem",
+          alignItems: "center"
+        }}
+      >
+        <IconButton disabled>
+          <Add />
+        </IconButton>
+        <IconButton disabled color="danger">
+          <Delete />
+        </IconButton>
+      </div>
+    </div>
+    <div>
+      <h4>Loading</h4>
+      <div
+        style={{
+          display: "flex",
+          gap: "1rem",
+          alignItems: "center"
+        }}
+      >
+        <IconButton loading>
+          <Add />
+        </IconButton>
+        <IconButton loading color="danger">
+          <Delete />
+        </IconButton>
+      </div>
+    </div>
+  </div>
 ```
 
 ## With Badge
@@ -179,27 +193,29 @@ IconButton supports multiple interactive states including normal, disabled, and
 Combine IconButton with Badge to display notification counts, status indicators, or unread markers alongside the button.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '1rem',
-  alignItems: 'center'
-}}>
-<Badge badgeContent={4} color="danger">
-  <IconButton>
-    <Settings />
-  </IconButton>
-</Badge>
-<Badge badgeContent="99+" color="warning">
-  <IconButton color="neutral">
-    <MoreVertIcon />
-  </IconButton>
-</Badge>
-<Badge variant="solid" color="success">
-  <IconButton color="primary">
-    <FavoriteIcon />
-  </IconButton>
-</Badge>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "1rem",
+      alignItems: "center"
+    }}
+  >
+    <Badge badgeContent={4} color="danger">
+      <IconButton>
+        <Settings />
+      </IconButton>
+    </Badge>
+    <Badge badgeContent="99+" color="warning">
+      <IconButton color="neutral">
+        <MoreVertIcon />
+      </IconButton>
+    </Badge>
+    <Badge variant="solid" color="success">
+      <IconButton color="primary">
+        <FavoriteIcon />
+      </IconButton>
+    </Badge>
+  </div>
 ```
 
 ## With Tooltip
@@ -207,32 +223,34 @@ Combine IconButton with Badge to display notification counts, status indicators,
 Wrap IconButton in a Tooltip to provide a text description on hover. This is especially important for icon-only buttons since the icon alone may not be self-explanatory for all users.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '1rem',
-  alignItems: 'center'
-}}>
-<Tooltip title="새 항목 추가">
-  <IconButton>
-    <Add />
-  </IconButton>
-</Tooltip>
-<Tooltip title="편집">
-  <IconButton color="neutral">
-    <Edit />
-  </IconButton>
-</Tooltip>
-<Tooltip title="삭제">
-  <IconButton color="danger">
-    <Delete />
-  </IconButton>
-</Tooltip>
-<Tooltip title="공유">
-  <IconButton color="success">
-    <ShareIcon />
-  </IconButton>
-</Tooltip>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "1rem",
+      alignItems: "center"
+    }}
+  >
+    <Tooltip title="새 항목 추가">
+      <IconButton>
+        <Add />
+      </IconButton>
+    </Tooltip>
+    <Tooltip title="편집">
+      <IconButton color="neutral">
+        <Edit />
+      </IconButton>
+    </Tooltip>
+    <Tooltip title="삭제">
+      <IconButton color="danger">
+        <Delete />
+      </IconButton>
+    </Tooltip>
+    <Tooltip title="공유">
+      <IconButton color="success">
+        <ShareIcon />
+      </IconButton>
+    </Tooltip>
+  </div>
 ```
 
 ## Circular Variants
@@ -240,30 +258,34 @@ Wrap IconButton in a Tooltip to provide a text description on hover. This is esp
 IconButton renders as a circular shape by default, making it visually distinct from rectangular text buttons and well-suited for floating action buttons and compact action rows.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '2rem',
-  alignItems: 'center'
-}}>
-<div>
-  <h4>Default</h4>
-  <div style={{
-    display: 'flex',
-    gap: '1rem',
-    alignItems: 'center'
-  }}>
-  <IconButton>
-    <Add />
-  </IconButton>
-  <IconButton variant="outlined">
-    <Edit />
-  </IconButton>
-  <IconButton variant="soft">
-    <Delete />
-  </IconButton>
-</div>
-</div>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "2rem",
+      alignItems: "center"
+    }}
+  >
+    <div>
+      <h4>Default</h4>
+      <div
+        style={{
+          display: "flex",
+          gap: "1rem",
+          alignItems: "center"
+        }}
+      >
+        <IconButton>
+          <Add />
+        </IconButton>
+        <IconButton variant="outlined">
+          <Edit />
+        </IconButton>
+        <IconButton variant="soft">
+          <Delete />
+        </IconButton>
+      </div>
+    </div>
+  </div>
 ```
 
 ## Action Buttons
@@ -271,27 +293,34 @@ IconButton renders as a circular shape by default, making it visually distinct f
 A practical example of IconButton used for common CRUD operations with distinct colors signaling the nature of each action.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '1rem',
-  alignItems: 'center'
-}}>
-<IconButton onClick={() => alert('Add clicked!')} title="Add new item">
-  <Add />
-</IconButton>
-<IconButton onClick={() => alert('Edit clicked!')} color="neutral" title="Edit item">
-  <Edit />
-</IconButton>
-<IconButton onClick={() => alert('Delete clicked!')} color="danger" title="Delete item">
-  <Delete />
-</IconButton>
-<IconButton onClick={() => alert('Share clicked!')} color="success" title="Share item">
-  <ShareIcon />
-</IconButton>
-<IconButton onClick={() => alert('Settings clicked!')} color="neutral" variant="outlined" title="Settings">
-  <Settings />
-</IconButton>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "1rem",
+      alignItems: "center"
+    }}
+  >
+    <IconButton onClick={() => alert("Add clicked!")} title="Add new item">
+      <Add />
+    </IconButton>
+    <IconButton onClick={() => alert("Edit clicked!")} color="neutral" title="Edit item">
+      <Edit />
+    </IconButton>
+    <IconButton onClick={() => alert("Delete clicked!")} color="danger" title="Delete item">
+      <Delete />
+    </IconButton>
+    <IconButton onClick={() => alert("Share clicked!")} color="success" title="Share item">
+      <ShareIcon />
+    </IconButton>
+    <IconButton
+      onClick={() => alert("Settings clicked!")}
+      color="neutral"
+      variant="outlined"
+      title="Settings"
+    >
+      <Settings />
+    </IconButton>
+  </div>
 ```
 
 ## Common Use Cases
@@ -341,7 +370,7 @@ import CloseIcon from '@mui/icons-material/Close';
   sx={{ position: 'absolute', top: 8, right: 8 }}
 >
   <CloseIcon />
-</IconButton>
+</IconButton>;
 ```
 
 ### Navigation Back Button
@@ -349,14 +378,9 @@ import CloseIcon from '@mui/icons-material/Close';
 ```tsx
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 
-<IconButton
-  variant="outlined"
-  color="neutral"
-  aria-label="Go back"
-  onClick={() => router.back()}
->
+<IconButton variant="outlined" color="neutral" aria-label="Go back" onClick={() => router.back()}>
   <ArrowBackIcon />
-</IconButton>
+</IconButton>;
 ```
 
 ## Best Practices