Button
buttonTriggers actions through solid, soft, outline, ghost, or danger variants.
Usage
Basic usage
The default solid button, and there are 4 variants: stroke, ghost, and text link.
<Button>Default</Button>
<Button variant="outline">Stroke</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="link">Text link</Button>Dimensions
sm / md / lg Three levels of height.
<Button size="sm">small</Button>
<Button size="md">medium</Button>
<Button size="lg">Large</Button>Loading and disabling
loading automatically enters the disabled state and displays spinner; tone=danger indicates dangerous operations.
<Button loading>Loading</Button>
<Button disabled>Disabled</Button>
<Button tone="danger">Delete</Button>When to use
Use Button for standard actions with solid, outline, ghost, or link styling; brand or danger tones; an optional loading state; and a press-scale animation. Use ShimmerButton, RainbowButton, or PulsatingButton for a special-effect CTA, and ButtonGroup for related actions. When you need the styling without <button> semantics, call buttonVariants(...) to obtain the class name.
Import
import { Button, buttonVariants } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| variant | "solid" | "outline" | "ghost" | "link" | "solid" | Visual style. |
| tone | "brand" | "danger" | "brand" | Semantic color tone. |
| size | "sm" | "md" | "lg" | "icon" | "iconSm" | "md" | Control size; icon and iconSm create square icon buttons. |
| loading | boolean | false | Shows a spinner and disables the button. |
| ...ButtonHTMLAttributes | ButtonHTMLAttributes<HTMLButtonElement> | — | Native attributes such as disabled and type. |
Events
| Event | Type | Description |
|---|---|---|
| onClick | (e: MouseEvent<HTMLButtonElement>) => void | Native click callback inherited from ButtonHTMLAttributes. |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Button content. |
| render | ReactElement | Custom element such as <a> or Next.js <Link>. Button styles and aria-disabled are merged into this element. |
Usage guidelines
- To avoid unsafe element animation,
rendermode does not apply Motion, so it has no press-scale effect. Color and hover transitions remain, and Button'schildrentake precedence as the visible content. loadingdisables the button automatically; do not adddisabledsolely for the loading state.- If an icon wraps away from its label in a custom or effect button, Tailwind Preflight's
svg{display:block}rule is usually the cause. See [[tailwind-preflight-svg-block-breaks-icon-text-in-nonflex-button]]; the wrapper needsinline-flex. Button already handles this internally.
Related
ShimmerButton · RainbowButton · PulsatingButton · RippleButton · ButtonGroup · SocialButton
Playground
<Button variant="solid" tone="brand" size="md">Hulian Button</Button>