IconButton | Pol-ui - A beautiful and functional UI library for React and Next.js

The IconButton component is a beauty way to display a action trigger without a text. A icon will be rendered with a button style.

import { IconButton } from "pol-ui";

Default IconButton

Footer

import { IconButton } from "pol-ui";
import { TbSearch } from "react-icons/tb";
import React from "react";
 
const IconButtonComponent = () => {
  return (
    <IconButton label="Search">
      <TbSearch />
    </IconButton>
  );
};
export default IconButtonComponent;

Props

The IconButton component has the following props:

Prop name	Type	Default	Description
theme	IconButtonTheme		The theme for the IconButton component.

💡

You can also provide any prop comming from the HTML button tag and the Button component props but the theme and the loadingLabel prop.

The concrete props for the IconButton component are:

export type IconButtonProps<T extends ElementType = "button"> = {
  theme?: DeepPartial<IconButtonTheme>;
} & ComponentPropsWithoutRef<T> &
  Omit<ButtonProps, "theme" | "loadingLabel">;

Examples

With Motion

The prop hasMotion will add a motion effect to the IconButton component while hovering, focusing or clicking.

With Motion

import { IconButton } from "pol-ui";
import { TbSearch } from "react-icons/tb";
import React from "react";
 
const IconButtonComponent = () => {
  return (
    <IconButton label="Search">
      <TbSearch />
    </IconButton>
  );
};
export default IconButtonComponent;

Outline

The prop outline will add a outline to the IconButton component.

Outline

import { IconButton } from "pol-ui";
import { TbSearch } from "react-icons/tb";
import React from "react";
 
const IconButtonComponent = () => {
  return (
    <IconButton variant={"outline"} label="Search">
      <TbSearch />
    </IconButton>
  );
};
export default IconButtonComponent;

To avoid having a tooltip, don't specify the label prop.

Without Tooltip

import { IconButton } from "pol-ui";
import { TbSearch } from "react-icons/tb";
import React from "react";
 
const IconButtonComponent = () => {
  return (
    <IconButton>
      <TbSearch />
    </IconButton>
  );
};
export default IconButtonComponent;

Loading

Use the loading prop to set the IconButton component in a loading state.

import { IconButton } from "pol-ui";
import { TbSearch } from "react-icons/tb";
import React from "react";
 
const IconButtonComponent = () => {
  return (
    <IconButton label="Search" loading>
      <TbSearch />
    </IconButton>
  );
};
export default IconButtonComponent;

Disabled

Use the disabled prop to set the IconButton component in a disabled state. This will avoid the IconButton component to be clicked, to have a hover effect and to have a tooltip when the label prop is set.

Disabled

import { IconButton } from "pol-ui";
import { TbSearch } from "react-icons/tb";
import React from "react";
 
const IconButtonComponent = () => {
  return (
    <IconButton label="Search" disabled>
      <TbSearch />
    </IconButton>
  );
};
export default IconButtonComponent;

All Rounded Sizes

The rounded prop will set the scale of rounded corners for the IconButton component.

All Rounded Sizes

import { IconButton, theme, RoundedSizes } from "pol-ui";
import { TbTrash } from "react-icons/tb";
import React from "react";
 
const IconButtonComponent = () => {
  return (
<div className="flex gap-3 flex-wrap">
    {Object.keys(theme.button.rounded).map(v => (
      <div className="flex flex-col gap-4" key={v}>
        <span>{v}</span>
        <IconButton {...args} rounded={v as RoundedSizes}>
          <TbTrash />
        </IconButton>
      </div>
    ))}
  </div>
  );
};
export default IconButtonComponent;

All Sizes

The size prop will set the scale of the IconButton component.

All Sizes

import { IconButton, theme, MainSizes } from "pol-ui";
import { TbTrash } from "react-icons/tb";
import React from "react";
 
const IconButtonComponent = () => {
  return (
    <div className="flex gap-3 flex-wrap items-start text-center">
    {Object.keys(theme.button.size).map(size => (
      <div className="flex flex-col gap-4" key={size}>
        <span>{size}</span>
        <IconButton {...args} size={size as MainSizes}>
          <TbTrash />
        </IconButton>
      </div>
    ))}
  </div>
  );
};
export default IconButtonComponent;

All Colors

The color prop will set the color of the IconButton component.

All Colors

import { IconButton, ColorsEnum, Colors } from "pol-ui";
import { TbTrash } from "react-icons/tb";
import React from "react";
 
const IconButtonComponent = () => {
  return (
<section className="flex gap-12 flex-wrap">
    <div className="flex gap-3 flex-col bg-secondary-50 p-4 rounded-xl">
      <h3 className="text-black text-xl">Light Mode</h3>
      <div className="flex gap-3 flex-wrap">
        {Object.keys(ColorsEnum).map(v => (
          <div className="flex flex-col gap-4" key={v}>
            <span>{v}</span>
            <IconButton {...args} color={v as Colors}>
              <TbTrash />
            </IconButton>
          </div>
        ))}
      </div>{' '}
    </div>
    <div className="flex gap-3 flex-col bg-secondary-900 p-4 rounded-xl">
      <h3 className="text-white text-xl">Dark Mode</h3>
      <div className="flex gap-3 flex-wrap">
        {Object.keys(ColorsEnum).map(v => (
          <div className="flex flex-col gap-4" key={v}>
            <span className="text-secondary-200">{v}</span>
            <IconButton {...args} color={v as Colors}>
              <TbTrash size={20} />
            </IconButton>
          </div>
        ))}
      </div>
    </div>
  </section>
  );
};
export default IconButtonComponent;

Theme

interface IconButtonTheme {
  base: string;
  color: ColorsType;
  disabled: string;
  loading: string;
  inner: {
    base: string;
    outline: string;
    color: ColorsType;
  };
  rounded: RoundedSizesTypes;
  size: MainSizesType;
}