Button

Installation#

npmpnpmyarnbun

npx sugarcoat add button

Examples#

Default#

Default

Variants#

The Button component supports several visual variants.

Variants

Colors#

Buttons can use different color palettes for semantic meaning.

Colors

Sizes#

Available in four sizes to fit different UI contexts.

Sizes

Outline Variants with Colors#

Combine outline variant with different colors.

Outline Colors

Ghost Variants with Colors#

Ghost Colors

With Icons#

Buttons can include icons before or after the label.

With Icons

Block Width#

Use the block prop to make a button span the full width.

Block Width

With Shadow#

Add elevation with the shadow prop.

Shadow

Disabled State#

Disabled

Polymorphism#

Use the as prop to render as a different element, or the render prop for more control.

As Link

Render Prop

Usage#

Import

import { Button } from "@sugarcoat/ui-nxt";

Usage

<Button variant="default" color="primary" size="md">
Click me
</Button>

Props#

Prop	Type	Default	Description
variant	"default" \| "neutral" \| "outline" \| "ghost" \| "text"	"default"	Visual style variant of the button
color	"primary" \| "accent" \| "success" \| "warning" \| "danger" \| "default" \| "inherit"	"primary"	Color palette for the button
size	"xs" \| "sm" \| "md" \| "lg"	"md"	Size of the button
leftIcon	ReactNode	-	Icon to display before the button label
rightIcon	ReactNode	-	Icon to display after the button label
block	boolean	false	Whether the button spans full width
shadow	"none" \| "sm" \| "md" \| "lg"	"none"	Box shadow elevation
border	"solid" \| "dashed" \| "none"	"solid"	Border style
disabled	boolean	false	Whether the button is disabled
as	ElementType	"button"	Change the underlying element type (polymorphism)
render	ReactElement \| ((props) => ReactElement)	-	Render as a custom element with full prop forwarding
css	SystemStyleObject	-	Additional CSS styles using Panda CSS syntax

Accessibility#

Uses native <button> element by default for full accessibility support
Supports keyboard navigation (Enter/Space to activate)
Disabled state properly communicated to assistive technologies
Focus visible styles included for keyboard users
When using as or render props, ensure the target element is accessible