Saturation UIsaturation UI
DocsComponentsBlocks
⌘K

Getting Started

IntroductionInstallationTheming

Components

AccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendarCardChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDropdown MenuEmptyFieldGlow EffectInputInput GroupItemKbdMenubarNovel EditorPaginationProgressive BlurProgressSelectSheetSkeletonSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Components
/
Button

Button

Displays a button or a component that looks like a button.

Installation

npx shadcn@latest add https://ui.saturation.io/r/button.json

Usage

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

export default function Example() {
  return <Button>Click me</Button>
}

Examples

Default

Secondary

Outline

Ghost

Destructive

With Icon

Icon

Circle

Loading

Sizes

API Reference

PropTypeDefaultDescription
variantstringdefaultThe visual style variant
sizestringdefaultThe size of the button
shapestringdefaultThe shape of the button (default or circle)
asChildbooleanfalseRender as a child component

On This Page

  • Preview
  • Installation
  • Usage
  • Examples
    • Default
    • Secondary
    • Outline
    • Ghost
    • Destructive
    • With Icon
    • Icon
    • Circle
    • Loading
    • Sizes
  • API Reference

Deploy your Saturation UI app

Build beautiful, saturated interfaces with our component library.

Deploy to Vercel for the best performance and developer experience.