Button

This component requires the FyskProvider. See Quick Start →

Preview

Button

TypeScript

With Text

With Icon

bash

1npx shadcn@latest add https://fysk.dev/r/button.json

tsx

1import { Button } from "@/components/ui"
2
3<Button variant="default">Click Me</Button>

Buttons come in several visual variants to establish hierarchy and context.

Component

TypeScript

Adjust the button size to fit different contexts.

Component

TypeScript

For Icons

For Text

Built-in handling for loading, success, and error states.

Component

TypeScript

Add icons at the start or end of the button label.

Component

TypeScript

Compose with other components using the asChild prop.

Component

TypeScript

Variants: Different styles to suit various contexts.
Size: Adjust the button size to fit different contexts.
State Management: Integrated `loading`, `success`, and `error` states with customizable text and icons.
Hierarchical Icons: Automatically resolves icons from the global `FyskProvider` context if not provided locally.
Composition: Supports the `asChild` pattern for seamless integration with framework routers (like Next.js Link).
Auto State Variant: Automatically switches the button variant based on the state (e.g., to `success-outline` when successful).

Prop	Type	Default	Description
`variant`	`"default" \| "secondary" \| "destructive" \| "success" \| "warning" \| "info" \| "outline" \| "ghost" \| "link" \| "glass" \| "success-outline" \| "warning-outline" \| "info-outline" \| "destructive-outline"`	`"default"`	The visual style of the button.
`size`	`"default" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"`	`"default"`	The size of the button.
`state`	`"idle" \| "loading" \| "success" \| "error"`	`"idle"`	The current interaction state of the button.
`autoStateVariant`	`boolean`	`false`	If true, automatically switches variants based on the current state.
`asChild`	`boolean`	`false`	If true, the button will render as its child element.
`loadingText`	`string`	-	Text to display during the loading state.
`successText`	`string`	-	Text to display during the success state.
`errorText`	`string`	-	Text to display during the error state.
`icon`	`React.ReactNode`	-	Icon to display in the idle state.
`iconLoading`	`React.ReactNode`	-	Custom icon for the loading state.
`iconSuccess`	`React.ReactNode`	-	Custom icon for the success state.
`iconError`	`React.ReactNode`	-	Custom icon for the error state.
`iconPosition`	`"start" \| "end"`	`"start"`	Position of the icon relative to the text.