Button

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

import { ArrowUp } from "lucide-react"

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

export function AlertDemo() {

Installation


pnpm slabui add button

Usage

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

<Button variant="outline">Button</Button>

Cursor

Tailwind v4 switched from cursor: pointer to cursor: default for the button component.

If you want to keep the cursor: pointer behavior, add the following code to your CSS file:

globals.css

@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

Examples

Size

Use the size prop to change the size of the button.

import { ArrowUp } from "lucide-react"

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

export function AlertSize() {

Default (Brand)

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

export function AlertDefault() {
  return (
    <div className="flex gap-2">

Blend (Brand)

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

export function AlertBlend() {
  return (
    <div className="flex gap-2">

Primary

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

export function AlertPrimary() {
  return (
    <div className="flex gap-2">

Outline

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

export function AlertOutline() {
  return (
    <div className="flex gap-2">

Secondary

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

export function AlertSecondary() {
  return (
    <div className="flex gap-2">

Ghost

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

export function AlertGhost() {
  return (
    <div className="flex gap-2">

Destructive

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

export function AlertDanger() {
  return (
    <div className="flex gap-2">

Success

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

export function AlertSuccess() {
  return (
    <div className="flex gap-2">

Warning

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

export function AlertSuccess() {
  return (
    <div className="flex gap-2">

Inverted

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

export function AlertInverted() {
  return (
    <div className="flex gap-2">

Link

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

export function AlertLink() {
  return (
    <div className="flex gap-2">

Icon

import { CircleFadingArrowUpIcon } from "lucide-react"

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

export function AlertIcon() {

With Icon

Remember to add the data-icon="inline-start" or data-icon="inline-end" attribute to the icon for the correct spacing.

import { GitBranch, GitFork } from "lucide-react"

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

export function ButtonWithIcon() {

Rounded

Use the rounded-full class to make the button rounded.

import { ArrowUpIcon } from "lucide-react"

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

export function ButtonRounded() {

Spinner

Render a <Spinner /> component inside the button to show a loading state. Remember to add the data-icon="inline-start" or data-icon="inline-end" attribute to the spinner for the correct spacing.

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

export function ButtonLoading() {
  return (
    <div className="flex gap-2">

Button Group

To create a button group, use the ButtonGroup component. See the Button Group documentation for more details.

"use client"

import {
  ArchiveIcon,
  ArrowLeftIcon,

As Link

You can use the buttonVariants helper to make a link look like a button.

Do not use <Button render={<a />} nativeButton={false} /> for links. The Base UI Button component always applies role="button", which overrides the semantic link role on <a> elements. Use buttonVariants with a plain <a> tag instead.

"use client"

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

export function ButtonRender() {

API Reference

Button

The Button component is a wrapper around the button element that adds a variety of styles and functionality.

Prop	Type	Default
`variant`	`"default" \| "outline" \| "ghost" \| "destructive" \| "secondary" \| "link"`	`"default"`
`size`	`"default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"`	`"default"`
`loading`	`"true" \| "false"`	`"false"`
`loadingPosition`	`"start" \| "end"`	`"start"`

Badge Container