Button

Base component to render button.

Button can be of type

primary - solid filled button (with primary background color), to be used for primary actions
default - bordered button (primary color) and text in primary color, to be used for secondary actions
danger - bordered button with error color, to be used in case of presenting any delete action to user
link - button without any border, can be used to render menu icons where we don't want to show users any button border

Generally the icon is placed before the button text. But that can also be changed, by configuring iconPlacement prop to be

beforeText - rendering the button icon before the text
afterText - rendering the button icon after the text

Usage

The Button component can be imported using

import { Button } from '@tail-kit/tail-kit'

Button Types

<div className="flex items-center flex-wrap -mb-4 lg:mb-0">
  <Button className="mr-4 mb-4 lg:mb-0">Default Button</Button>

  <Button buttonType="primary" className="mr-4 mb-4 lg:mb-0">
    Primary Button
  </Button>

  <Button buttonType="danger" className="mr-4 mb-4 lg:mb-0">
    Danger Button
  </Button>

  <Button buttonType="link" className="mb-4 lg:mb-0">
    Link Button
  </Button>
</div>

<div className="flex items-center flex-wrap -mb-4 lg:mb-0">
  <Button className="mr-4 mb-4 lg:mb-0">Default Button</Button>

  <Button buttonType="primary" className="mr-4 mb-4 lg:mb-0">
    Primary Button
  </Button>

  <Button buttonType="danger" className="mr-4 mb-4 lg:mb-0">
    Danger Button
  </Button>

  <Button buttonType="link" className="mb-4 lg:mb-0">
    Link Button
  </Button>
</div>

Default Button With Icon

<Button icon={<HiShieldCheck />}>Update Password</Button>

<Button icon={<HiShieldCheck />}>Update Password</Button>

Primary Loading Button

<Button loading buttonType="primary">
  Creating Blog
</Button>

<Button loading buttonType="primary">
  Creating Blog
</Button>

Simple loading button

<Button loading />

<Button loading />

Danger Button with Icon

<Button buttonType="danger" icon={<HiOutlineTrash />}>
  Delete User
</Button>

<Button buttonType="danger" icon={<HiOutlineTrash />}>
  Delete User
</Button>

Simple counter

function Counter() {
  const [count, setCount] = React.useState(0)

  return (
    <div className="flex items-center space-x-4">
      <Button
        icon={<HiMinus />}
        onClick={() => {
          setCount((prevCount) => prevCount - 1)
        }}
      />
      <span className="tabular-nums">{count}</span>
      <Button
        icon={<HiPlus />}
        onClick={() => {
          setCount((prevCount) => prevCount + 1)
        }}
      />
    </div>
  )
}

function Counter() {
  const [count, setCount] = React.useState(0)

  return (
    <div className="flex items-center space-x-4">
      <Button
        icon={<HiMinus />}
        onClick={() => {
          setCount((prevCount) => prevCount - 1)
        }}
      />
      <span className="tabular-nums">{count}</span>
      <Button
        icon={<HiPlus />}
        onClick={() => {
          setCount((prevCount) => prevCount + 1)
        }}
      />
    </div>
  )
}

Editable Example

Button Props

Name	Description	Default Value
children	text rendered inside button `string \| undefined`	--
className	additional class applied to button `string \| undefined`	--
style	button styles `CSSProperties \| undefined`	--
icon	icon rendered `Element \| undefined`	--
iconPlacement	placement of icon with respect to label, whether it should be before label or after label `"afterText" \| "beforeText" \| undefined`	`beforeText`
buttonType	type of the button `"primary" \| "default" \| "danger" \| "link" \| undefined`	`default`
loading	show loading spinner in the button, if there is a icon present, it would render instead of the icon `boolean \| undefined`	--