Icon Button

An interactive element used to perform an action such as submitting a form or opening a dialog. Unlike a normal button, it only contains an icon.

MDN button, UI Playbook

inline-flex items-center justify-center border border-transparent font-medium rounded whitespace-nowrap transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 text-base py-2 px-2.5 [&>svg]:w-5 [&>svg]:h-5 text-white bg-primary-600 hover:bg-primary-700 hover:text-white focus:bg-primary-700 focus:text-white focus:ring-primary-700 dark:hover:bg-primary-700 dark:hover:text-white dark:focus:bg-primary-700 dark:focus:text-white dark:bg-primary-600 dark:focus:ring-primary-600 cursor-pointer

import React from 'react'
import { IconDeviceFloppy } from '@tabler/icons-react';
import { IconButton } from '@components/ui/IconButton';

() => {
  return (
    <IconButton 
      kind="primary"
      onClick={() => alert("Hello World")}
    >
      
        <IconDeviceFloppy />
        <span className="sr-only">Save</span>
      
    </IconButton>
  );
};

There are six kinds of buttons:

• primary - should be used when you want to catch attention. Acts as the "Call to Action". There shouldn't be two or more primary buttons within a certain space to avoid confusion on which of them are important.
• secondary - great to use in conjuction with primary buttons. Acts as other actions the user may take besides the primary button.
• neutral - a variant of the secondary button for styling purposes. It acts as a clickable text.
• success - an alternative style of the primary button.
• danger - should be used to signify destructive actions like deleting a resource.
• warn - should be used to signify an action that the user might be concerned about.

The IconButton UI component uses the button HTML element underneath so you can pass button attributes or even data-* attributes to it.

<IconButton
  type="submit"
  data-productid="1232"
>
  <IconDeviceFloppy />
  <span className="sr-only">Save</span>
</IconButton>

Installation

Copy and paste this Button primitive at components/ui/Button.tsx.

Copy and paste this IconButton primitive at components/ui/IconButton.tsx.

Usage

import { Button } from '@components/ui/Button';
import { IconDeviceFloppy } from '@tabler/icons-react';

<IconButton>
  <IconDeviceFloppy />
  <span className="sr-only">Save</span>
</IconButton>

Examples

Kinds

There are six kinds of buttons. You can update the variant by the kind prop. The default value is secondary.

Soft

You can toggle the soft version of a button by <IconButton soft />. It is false by default.

Outlined

You can toggle the outlined version of a button by <IconButton outlined />. It is false by default.

Ghost

You can toggle the ghost version of a button by <IconButton ghost />. It is false by default.

Combined Variants

You can combine variations for soft, outlined, and ghost icon buttons.

Sizes

There are four sizes an icon button can have. You can adjust the variant using the size prop. By default, it uses base.

Disabled State

Toggling the disabled prop to true will prevent any interactions to the button. It is advised to add a Tooltip as to why the button is disabled to avoid confusing for the users.

Loading State

For the loading state, you can use a loading icon and add a disabled prop to prevent any interactions to the button.

Selected

Toggle the selected prop will trigger the selected state.