gantri-components 2.239.1 → 2.240.0

package/CLAUDE.md

@@ -174,7 +174,11 @@ const StyledBox = styled.div<StyledBoxProps>`
 | ~56-64px | `large` |
 | ~80px | `extraLarge` |
 
-**Icon-only**: If the button is a perfect circle with just an icon (no text), pass `icon` without `text`.
+**Icon-only**: A button with `icon` and no `text` renders as a normal pill-shaped button with the icon centered. To make it a perfect circle, opt in with the `rounded` prop:
+```tsx
+<Button icon={<Icon name="ui-control:x" />} rounded variant="ghost" />
+```
+Without `rounded`, the button stays the normal shape — `iconLocation` is silently ignored when there is no text.
 
 - Modern themes: pill shape (40px radius), inner glow, no border
 - Classic themes: square corners (theme.borderRadius), solid borders

package/dist/components/button/button.types.d.ts

@@ -23,6 +23,14 @@ export interface ButtonProps extends Pick<BaseProps, Exclude<keyof BaseProps, 'c
     minWidth?: ResolutionAwareProp<Property.Width>;
     onClick?: (event: MouseEvent) => void;
     processing?: boolean;
+    /**
+     * Render the button as a circle. Only meaningful for icon-only buttons
+     * (no text). When `true` AND there is no text, the button becomes a
+     * perfect circle (aspect-ratio: 1, border-radius: 50%). When `false`
+     * (default), an icon-only button stays the normal pill/rectangle shape
+     * with the icon centered.
+     */
+    rounded?: boolean;
     size?: ResolutionAwareProp<ButtonSize>;
     text?: string;
     textLineHeight?: Property.LineHeight;