@delightui/components 0.1.105 → 0.1.107

package/docs/components/atoms/IconButton.md

@@ -0,0 +1,407 @@
+# IconButton
+
+A specialized button component designed specifically for displaying icons without text content. IconButton inherits most functionality from the Button component but is optimized for icon-only interactions. It provides a compact, accessible way to trigger actions using only visual icons, making it perfect for toolbars, navigation, and space-constrained interfaces.
+
+## Aliases
+
+- IconButton
+- IconBtn
+- ActionIcon
+
+## Props Breakdown
+
+**Extends:** `HTMLAttributes<HTMLButtonElement>` (via ButtonProps, excluding `leadingIcon`, `trailingIcon`, `style`, `size`)
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `appearance` | `'Default' \| 'Inverse'` | `'Default'` | No | Appearance of the button |
+| `icon` | `ReactNode` | `undefined` | No | The icon to be displayed |
+| `style` | `'Primary' \| 'Secondary'` | `'Primary'` | No | Style of the button |
+| `size` | `'Small' \| 'Medium'` | `'Medium'` | No | Size of the button |
+| `type` | `'Filled' \| 'Outlined' \| 'Ghost'` | `'Filled'` | No | Type of the button |
+| `loading` | `boolean` | `false` | No | Indicates if the button is in a loading state |
+| `disabled` | `boolean` | `false` | No | Specifies if the button is disabled |
+| `onClick` | `(event?: MouseEvent<HTMLElement>) => void` | `undefined` | No | Click event handler for the button |
+| `className` | `string` | `undefined` | No | Additional class for styling |
+| `actionType` | `'button' \| 'submit' \| 'reset'` | `'button'` | No | Type of action associated with the button |
+
+Plus all standard HTML button attributes (id, title, aria-*, data-*, etc.).
+
+## Examples
+
+### Basic Icon Button
+
+```tsx
+import { IconButton, Icon } from '@delightui/components';
+
+function BasicIconButtonExample() {
+  const handleClick = () => {
+    console.log('Icon button clicked!');
+  };
+
+  return (
+    <IconButton
+      icon={<Icon name="AddFilled" />}
+      onClick={handleClick}
+    />
+  );
+}
+```
+
+### Different Sizes
+
+```tsx
+import { IconButton, Icon } from '@delightui/components';
+
+function SizedIconButtonsExample() {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+      <IconButton
+        size="Small"
+        icon={<Icon name="SearchFilled" />}
+        onClick={() => console.log('Small search')}
+      />
+      
+      <IconButton
+        size="Medium"
+        icon={<Icon name="SearchFilled" />}
+        onClick={() => console.log('Medium search')}
+      />
+    </div>
+  );
+}
+```
+
+### Different Styles and Types
+
+```tsx
+import { IconButton, Icon } from '@delightui/components';
+
+function StyledIconButtonsExample() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      {/* Primary Styles */}
+      <div style={{ display: 'flex', gap: '8px' }}>
+        <IconButton
+          style="Primary"
+          type="Filled"
+          icon={<Icon name="CheckFilled" />}
+        />
+        <IconButton
+          style="Primary"
+          type="Outlined"
+          icon={<Icon name="CheckFilled" />}
+        />
+        <IconButton
+          style="Primary"
+          type="Ghost"
+          icon={<Icon name="CheckFilled" />}
+        />
+      </div>
+
+      {/* Secondary Styles */}
+      <div style={{ display: 'flex', gap: '8px' }}>
+        <IconButton
+          style="Secondary"
+          type="Filled"
+          icon={<Icon name="InfoFilled" />}
+        />
+        <IconButton
+          style="Secondary"
+          type="Outlined"
+          icon={<Icon name="InfoFilled" />}
+        />
+        <IconButton
+          style="Secondary"
+          type="Ghost"
+          icon={<Icon name="InfoFilled" />}
+        />
+      </div>
+    </div>
+  );
+}
+```
+
+### Different Appearances
+
+```tsx
+import { IconButton, Icon } from '@delightui/components';
+
+function AppearanceIconButtonsExample() {
+  return (
+    <div style={{ display: 'flex', gap: '16px' }}>
+      <IconButton
+        appearance="Default"
+        icon={<Icon name="AddFilled" />}
+        onClick={() => console.log('Default appearance')}
+      />
+      
+      <IconButton
+        appearance="Inverse"
+        icon={<Icon name="AddFilled" />}
+        onClick={() => console.log('Inverse appearance')}
+      />
+    </div>
+  );
+}
+```
+
+### Loading State
+
+```tsx
+import { IconButton, Icon } from '@delightui/components';
+
+function LoadingIconButtonExample() {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleClick = async () => {
+    setIsLoading(true);
+    // Simulate API call
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    setIsLoading(false);
+  };
+
+  return (
+    <IconButton
+      icon={<Icon name="SearchFilled" />}
+      loading={isLoading}
+      onClick={handleClick}
+    />
+  );
+}
+```
+
+### Disabled State
+
+```tsx
+import { IconButton, Icon } from '@delightui/components';
+
+function DisabledIconButtonExample() {
+  return (
+    <div style={{ display: 'flex', gap: '16px' }}>
+      <IconButton
+        icon={<Icon name="AddFilled" />}
+        disabled={false}
+        onClick={() => console.log('Enabled button clicked')}
+      />
+      
+      <IconButton
+        icon={<Icon name="AddFilled" />}
+        disabled={true}
+        onClick={() => console.log('This will not be called')}
+      />
+    </div>
+  );
+}
+```
+
+### Form Integration
+
+```tsx
+import { Form, FormField, IconButton, Icon, Input, Button } from '@delightui/components';
+
+function FormIconButtonExample() {
+  const [showPassword, setShowPassword] = useState(false);
+
+  const handleSubmit = (data: any) => {
+    console.log('Form submitted:', data);
+  };
+
+  return (
+    <Form onSubmit={handleSubmit}>
+      <FormField name="email" label="Email">
+        <Input type="email" />
+      </FormField>
+
+      <FormField name="password" label="Password">
+        <div style={{ position: 'relative' }}>
+          <Input type={showPassword ? 'text' : 'password'} />
+          <IconButton
+            type="Ghost"
+            size="Small"
+            icon={<Icon name={showPassword ? 'VisibilityOffFilled' : 'VisibilityOnFilled'} />}
+            onClick={() => setShowPassword(!showPassword)}
+            style={{ position: 'absolute', right: '8px', top: '50%', transform: 'translateY(-50%)' }}
+          />
+        </div>
+      </FormField>
+
+      <Button type="submit">
+        Submit
+      </Button>
+    </Form>
+  );
+}
+```
+
+### Toolbar Example
+
+```tsx
+import { IconButton, Icon } from '@delightui/components';
+
+function ToolbarExample() {
+  const handleAction = (action: string) => {
+    console.log(`${action} clicked`);
+  };
+
+  return (
+    <div style={{ 
+      display: 'flex', 
+      gap: '8px', 
+      padding: '8px', 
+      border: '1px solid #ccc', 
+      borderRadius: '4px',
+      backgroundColor: '#f9f9f9'
+    }}>
+      <IconButton
+        size="Small"
+        type="Ghost"
+        icon={<Icon name="AddFilled" />}
+        onClick={() => handleAction('Add')}
+        title="Add item"
+      />
+      
+      <IconButton
+        size="Small"
+        type="Ghost"
+        icon={<Icon name="SearchFilled" />}
+        onClick={() => handleAction('Search')}
+        title="Search"
+      />
+      
+      <IconButton
+        size="Small"
+        type="Ghost"
+        icon={<Icon name="CloseDeleteOutlined" />}
+        onClick={() => handleAction('Delete')}
+        title="Delete"
+      />
+      
+      <div style={{ width: '1px', backgroundColor: '#ccc', margin: '0 4px' }} />
+      
+      <IconButton
+        size="Small"
+        type="Ghost"
+        icon={<Icon name="InfoFilled" />}
+        onClick={() => handleAction('Info')}
+        title="Information"
+      />
+    </div>
+  );
+}
+```
+
+### Navigation Example
+
+```tsx
+import { IconButton, Icon } from '@delightui/components';
+
+function NavigationExample() {
+  const [currentPage, setCurrentPage] = useState(1);
+  const totalPages = 10;
+
+  const goToPrevious = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
+
+  const goToNext = () => {
+    if (currentPage < totalPages) {
+      setCurrentPage(currentPage + 1);
+    }
+  };
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+      <IconButton
+        icon={<Icon name="ChevronLeftOutlined" />}
+        disabled={currentPage === 1}
+        onClick={goToPrevious}
+        title="Previous page"
+      />
+      
+      <span>Page {currentPage} of {totalPages}</span>
+      
+      <IconButton
+        icon={<Icon name="ChevronRightOutlined" />}
+        disabled={currentPage === totalPages}
+        onClick={goToNext}
+        title="Next page"
+      />
+    </div>
+  );
+}
+```
+
+### Custom Styling
+
+```tsx
+import { IconButton, Icon } from '@delightui/components';
+
+function CustomStyledIconButtonExample() {
+  return (
+    <div style={{ display: 'flex', gap: '16px' }}>
+      <IconButton
+        icon={<Icon name="AddFilled" />}
+        className="custom-icon-button-primary"
+        onClick={() => console.log('Custom primary clicked')}
+      />
+      
+      <IconButton
+        icon={<Icon name="CloseDeleteOutlined" />}
+        className="custom-icon-button-danger"
+        onClick={() => console.log('Custom danger clicked')}
+      />
+    </div>
+  );
+}
+```
+
+### Action Type Examples
+
+```tsx
+import { Form, IconButton, Icon, Input, FormField } from '@delightui/components';
+
+function ActionTypeExample() {
+  const handleSubmit = (data: any) => {
+    console.log('Form submitted:', data);
+  };
+
+  const handleReset = () => {
+    console.log('Form reset');
+  };
+
+  return (
+    <Form onSubmit={handleSubmit}>
+      <FormField name="searchTerm" label="Search">
+        <Input placeholder="Enter search term..." />
+      </FormField>
+
+      <div style={{ display: 'flex', gap: '8px', marginTop: '16px' }}>
+        <IconButton
+          actionType="submit"
+          icon={<Icon name="SearchFilled" />}
+          title="Search"
+        />
+        
+        <IconButton
+          actionType="reset"
+          type="Outlined"
+          icon={<Icon name="CloseDeleteOutlined" />}
+          onClick={handleReset}
+          title="Clear"
+        />
+        
+        <IconButton
+          actionType="button"
+          type="Ghost"
+          icon={<Icon name="InfoFilled" />}
+          onClick={() => console.log('Info clicked')}
+          title="Information"
+        />
+      </div>
+    </Form>
+  );
+}
+```