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

Introduction

The button component is a common UI component found on the web that allows users to trigger certain actions on your website such as submitting a form, navigating to a new page, or downloading a file.

The examples from the Pol-ui library allows you to customise the buttons with different colors, sizes, icons, and more. All examples are built with React and Tailwind CSS.

In order to start using the button component you need to import it from Pol-ui:

import { Button } from "pol-ui";

Default button

Use this example to create a default button by using the <Button> component from React and by adding the color property you can change the color of the button.

Default banner

import { Button } from "pol-ui";
 
import React from "react";
const ButtonComponent = () => {
  return <Button>Button</Button>;
};
export default ButtonComponent;

Props

Prop name	Type	Default	Description
children	React.ReactNode	-	The children of the breadcrumb component.
as	React.ElementType	"button"	The HTML tag to render the button as.
href	string	-	The URL to navigate when click.
color	Colors	"primary"	The color of the button.
fullSize	boolean	false	The button will take the full width.
loading	boolean	false	The button will be in a loading state.
loadingLabel	string	"Loading"	The label of the loading state.
hasMotion	boolean	false	The button will have a motion effect.
loader	React.ReactNode	<Loader/>	The loader component to use.
label	string	-	The label of the button.
variant	ghost - filled - outline - link	false	The button will have an outline style.
rounded	RoundedSizes	'md'	The button will have a rounded style.
positionInGroup	PositionInGroup	none	The position of the button in a group.
size	MainSizes	"md"	The size of the button.
theme	ButtonTheme	buttonTheme	The theme of the button.
innerClassName	string	-	Inner class name of the button children.

Add to the previous table all native props from the HTML button tag.

If you provide a href property, the button will render as an anchor tag, so all native props of the anchor tag are also available.

Examples

Outline button

Pol-ui allows you to create an variant = outline button by using the outline property. It's an alternative style for the button component. If you rather use direct classes from Tailwind CSS, feel free to use the className property but this prop gives this functionality for free.

Outline button

import { Button } from "pol-ui";
 
import React from "react";
const ButtonComponent = () => {
  return <Button variant="outline">Button</Button>;
};
export default ButtonComponent;

With loading state

The loading property allows you to create a button with a loading state. A loading spinner will be displayed and the button will be disabled.

Loading button

import { Button } from "pol-ui";
 
import React from "react";
const ButtonComponent = () => {
  return <Button loading>Button</Button>;
};
export default ButtonComponent;

Disabled button

To display a disabled button, you can use the disabled property. This prop will change the button to a disabled state and the user won't be able to interact with it. At the same time, the button will have a different color to indicate that it's disabled.

Disabled button

import { Button } from "pol-ui";
 
import React from "react";
const ButtonComponent = () => {
  return <Button disabled>Button</Button>;
};
export default ButtonComponent;

Full with button

The fullSize property allows you to create a button that takes the full width of its parent container. Useful for mobile devices or when you want to create a button that takes the full width of the screen.

Full sized button

import { Button } from "pol-ui";
 
import React from "react";
const ButtonComponent = () => {
  return <Button fullSized>Button</Button>;
};
export default ButtonComponent;

Transparent button

The ghost variant property allows you to create a button without a background color. This is useful when you want to create a button that looks like a link or 'just text' but still want to use the button component.

Ghost button

import { Button } from "pol-ui";
 
import React from "react";
const ButtonComponent = () => {
  return <Button variant={"ghost"}>Button</Button>;
};
export default ButtonComponent;

Link button

Pol-ui doesn't have a specific component for links, but you can use the <Button> component and add any children as Link with the asChild property.

Link button

import { Button } from "pol-ui";
import { Link } from "react-router-dom / next / gatsby / etc";
 
import React from "react";
 
export const LinkButton = () => {
  return (
    <Button asChild>
      <Link href="https://google.com">Google</Link>
    </Button>
  );
};
export default LinkButton;

All rounded styles

All rounded styles are available for the button component. You can use the rounded property to change the style of the button.

Rounded button

import { Button } from "pol-ui";
 
import React from "react";
const ButtonComponent = () => {
  return (<div className="flex gap-3 flex-wrap">
    {Object.keys(theme.button.rounded).map(rounded => (
      <Button key={rounded} {...args} rounded={rounded as RoundedSizes}>
        {rounded}
      </Button>
    ))}
  </div>);
};
export default ButtonComponent;

All sizes styles

The size property is used to change the size of the button. You can use the size property to change the size of the button.

sizes button

import { Button,MainSizes,theme } from "pol-ui";
 
import React from "react";
const ButtonComponent = () => {
  return (<div className="flex gap-3 flex-wrap items-center">
    {Object.keys(theme.button.size).map(size => (
      <Button key={size} {...args} size={size as MainSizes}>
        {size}
      </Button>
    ))}
  </div>)
};
export default ButtonComponent;

All color styles

Button component follows your style guide and allows you to create buttons with different colors. You can use the color property to change the color of the button.

For example, you could use the color success when you want to create a button that indicates a successful action.

All colors button

import { Button, Colors, theme} from "pol-ui";
 
import React from "react";
const ButtonComponent = () => {
  return (
     <section className="flex gap-12 flex-wrap justify-center items-center">
    <div className="flex gap-3 flex-wrap p-4 rounded-xl">
      {Object.keys(theme.button.color).map(color => (
        <Button key={color} {...args} color={color as Colors}>
          {color}
        </Button>
      ))}
    </div>
    <div className="dark">
      <div className="flex gap-3 flex-wrap bg-secondary-900 p-4 rounded-xl">
        {Object.keys(theme.button.color).map(color => (
          <Button key={color} {...args} color={color as Colors}>
            {color}
          </Button>
        ))}
      </div>
    </div>
  </section>
  )
};
export default ButtonComponent;

Outlined colors

Button component follows your style guide and allows you to create buttons with different colors. You can use the color property to change the color of the button.

For example, you could use the color success when you want to create a button that indicates a successful action.

All outlined button

import { Button, Colors, theme} from "pol-ui";
 
import React from "react";
const ButtonComponent = () => {
  return (
     <section className="flex gap-12 flex-wrap justify-center items-center">
    <div className="flex gap-3 flex-wrap p-4 rounded-xl">
      {Object.keys(theme.button.color).map(color => (
        <Button key={color} {...args} color={color as Colors} outline>
          {color}
        </Button>
      ))}
    </div>
    <div className="dark">
      <div className="flex gap-3 flex-wrap bg-secondary-900 p-4 rounded-xl">
        {Object.keys(theme.button.color).map(color => (
          <Button key={color} {...args} color={color as Colors} outline>
            {color}
          </Button>
        ))}
      </div>
    </div>
  </section>
  )
};
export default ButtonComponent;

Button with icon

To add any icon to the button, you can use the <Button> component and add the <Icon> component as a child of the button. To let more flexibility, Button doesn't have a specific prop to add an icon so add it as well in the children of the button.

If your <Button> component only has an icon, you can use the IconButton component.

Button with icon

import { Button } from "pol-ui";
import { TbStarFilled } from 'react-icons/tb'
 
import React from "react";
const ButtonComponent = () => {
  return (
    <Button>
      <TbStarFilled />
      Button
    </Button>
  );
};
export default ButtonComponent;

Theme

To learn more about how to customize the appearance of components, please see the Theme docs.

interface ButtonTheme {
  base: string;
  fullSized: string;
  color: ColorsType;
  ring: {
    base: string;
    colors: ColorsType;
  };
  disabled: string;
  loading: string;
  loaderSlot: string;
  loaderLeftPosition: MainSizesType;
  inner: {
    base: string;
    position: PositionInButtonGroup;
    outline: string;
    loadingPadding: MainSizesType;
  };
  label: string;
  outline: IBoolean & {
    outlineBase: string;
    color: ColorsType;
  };
  rounded: RoundedSizesTypes;
  size: MainSizesType;
}