Styled Icon Button Components

Description

The IconButton components are predefined styled buttons built on top of the IconButton from Liberty Core. These buttons are customized for various use cases in UI interactions.

Props

The following IconButton variants are available:

Component Name	Description
IconButton_Contrast	A high-contrast icon button that scales on hover.
IconButton_Menus	Positioned for menu interactions with hover effects.
IconButton_ListBottom	A floating button at the bottom-right of the page.
IconButton_TabClose	A circular button for closing tabs with hover effects.
IconButton_Alert	A minimal button for alerts with centered alignment.

---

Example Usage

Basic Styled Icon Buttons

import { IconButton_Contrast, IconButton_Menus, IconButton_ListBottom } from '@nomana-it/liberty-core';

export const IconButtonExample = () => {
  return (
    <>
      <IconButton_Contrast>🔍</IconButton_Contrast>
      <IconButton_Menus>📋</IconButton_Menus>
      <IconButton_ListBottom>⬇️</IconButton_ListBottom>
    </>
  );
};

---

Styled Icon Button Components

• IconButton_Contrast
• IconButton_Menus
• IconButton_ListBottom
• IconButton_TabClose
• IconButton_Alert

---

Notes

• These components ensure consistent styling for icon buttons across the UI.
• They inherit all behaviors from the standard IconButton component.
• The hover effects enhance usability with scaling and color transitions.

Useful Links

🔗 GitHub Repository (Core): Liberty Core
🔗 GitHub Repository (Test Project): Liberty Test
📖 Live Documentation: Liberty Core Docs
💖 Sponsor & Support: Sponsor Liberty Core