Button

Description

A button is a clickable element that allows users to perform an action or trigger an event, such as submitting a form, opening a dialog, or executing a command.

Variants

  • Default: The standard button style used for primary actions.
  • Muted: A subdued button style for less prominent actions.
  • Success: Indicates a successful or positive action.
  • Destructive: Used for actions that are potentially harmful or irreversible.
  • Warning: Highlights actions that require caution.
  • Info: Provides additional information or context.
  • Outline: A button with an outlined border, often used for secondary actions.
  • Ghost: A minimal button style with no background, typically used for tertiary actions.
  • Icon: A button that contains only an icon, used for compact actions.
  • Avatar: A button that includes an avatar image, often used for user profiles or accounts.

Preview

Installation

Add component:

Usage

Code

components/ui/button.tsx