Button

Installation

bunnpmpnpmyarn
pnpm dlx shadcn@latest add @shark-ui/button

Usage

import { Button } from "@/components/ui/button";

<Button>Button</Button>

Link

You can use asChild prop on <Button /> to make another element styled as a button.

Variants

You can change the variant of the button using the variant prop.

Solid

Outline

Secondary

Ghost

Link

Destructive

Sizes

You can change the size of the button using the size prop.

Extra Small

Small

Large

Extra Large

Pill

You can use the pill prop to create fully rounded buttons.

Disabling click effect

You can disable the click effect of the button using the clickEffect prop.

States

Disabled

You can disable the button using the disabled prop.

Loading

You can show a loading indicator when the button is loading using the isLoading prop.

Examples

Custom color

You can use the className prop to add custom colors to the button.

Icon

You can create icon-only buttons using the icon-* size variants.

With icon

You can add icons to buttons alongside text to provide visual context.

Touch hitbox

You can change the touch hitbox of the button to improve the user experience on touch devices.

Add a .touch-target utility to a element to extend the touch target.

@utility touch-target {
  position: relative;
  &::before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    min-height: 44px;
    min-width: 44px;
    z-index: 9999;
  }
}

API Reference