Button

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

import { IconArrowUp } from "~/components/icons"
import { Button } from "~/components/ui/button"

export function ButtonDemo() {
  return (
    <div class="flex flex-wrap items-center gap-2 md:flex-row">
      <Button variant="outline">Button</Button>
      <Button aria-label="Submit" size="icon" variant="outline">
        <IconArrowUp />
      </Button>
    </div>
  )
}

Installation

npx solidui-cli@latest add button

pnpx solidui-cli@latest add button

yarn dlx solidui-cli@latest add button

bunx --bun solidui-cli@latest add button

dpx solidui-cli@latest add button

Install the following dependencies:

npm install @kobalte/core

pnpm add @kobalte/core

yarn add @kobalte/core

bun add @kobalte/core

deno add npm:@kobalte/core

Copy and paste the following code into your project.

components/ui/button.tsx

import type { JSX, ValidComponent } from "solid-js"
import { splitProps } from "solid-js"

import * as ButtonPrimitive from "@kobalte/core/button"
import type { PolymorphicProps } from "@kobalte/core/polymorphic"
import type { VariantProps } from "class-variance-authority"
import { cva } from "class-variance-authority"

import { cn } from "~/lib/utils"

const buttonVariants = cva(
  "inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-sm outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive:
          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
        outline:
          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
        link: "text-primary underline-offset-4 hover:underline"
      },
      size: {
        default: "h-9 px-4 py-2 has-[>svg]:px-3",
        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
        icon: "size-9",
        "icon-sm": "size-8",
        "icon-lg": "size-10"
      }
    },
    defaultVariants: {
      variant: "default",
      size: "default"
    }
  }
)

type ButtonProps<T extends ValidComponent = "button"> = ButtonPrimitive.ButtonRootProps<T> &
  VariantProps<typeof buttonVariants> & { class?: string | undefined; children?: JSX.Element }

const Button = <T extends ValidComponent = "button">(
  props: PolymorphicProps<T, ButtonProps<T>>
) => {
  const [local, others] = splitProps(props as ButtonProps, ["variant", "size", "class"])
  return (
    <ButtonPrimitive.Root
      class={cn(buttonVariants({ variant: local.variant, size: local.size }), local.class)}
      data-slot="button"
      {...others}
    />
  )
}

export type { ButtonProps }
export { Button, buttonVariants }

Update the import paths to match your project setup.

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

1
@layer base {
2
  button:not(:disabled),
3
  [role="button"]:not(:disabled) {
4
    cursor: pointer;
5
  }
6
}

Examples

Size

import { IconArrowUp } from "~/components/icons"
import { Button } from "~/components/ui/button"

export function ButtonSizes() {
  return (
    <div class="flex flex-col items-start gap-8 sm:flex-row">
      <div class="flex items-start gap-2">
        <Button size="sm" variant="outline">
          Small
        </Button>
        <Button aria-label="Submit" size="icon-sm" variant="outline">
          <IconArrowUp />
        </Button>
      </div>
      <div class="flex items-start gap-2">
        <Button variant="outline">Default</Button>
        <Button aria-label="Submit" size="icon" variant="outline">
          <IconArrowUp />
        </Button>
      </div>
      <div class="flex items-start gap-2">
        <Button size="lg" variant="outline">
          Large
        </Button>
        <Button aria-label="Submit" size="icon-lg" variant="outline">
          <IconArrowUp />
        </Button>
      </div>
    </div>
  )
}

Default

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

export function ButtonDefault() {
  return <Button>Button</Button>
}

Outline

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

export function ButtonOutline() {
  return <Button variant="outline">Outline</Button>
}

Secondary

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

export function ButtonSecondary() {
  return <Button variant="secondary">Secondary</Button>
}

Ghost

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

export function ButtonGhost() {
  return <Button variant="ghost">Ghost</Button>
}

Destructive

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

export function ButtonDestructive() {
  return <Button variant="destructive">Destructive</Button>
}

Link

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

export function ButtonLink() {
  return <Button variant="link">Link</Button>
}

Icon

import { IconDownload } from "~/components/icons"
import { Button } from "~/components/ui/button"

export function ButtonIcon() {
  return (
    <Button size="icon" variant="outline">
      <IconDownload />
    </Button>
  )
}

With Icon

The spacing between the icon and the text is automatically adjusted based on the size of the button. You do not need any margin on the icon.

import { IconGitBranch } from "~/components/icons"
import { Button } from "~/components/ui/button"

export function ButtonWithIcon() {
  return (
    <Button size="sm" variant="outline">
      <IconGitBranch /> New Branch
    </Button>
  )
}

Rounded

import { IconArrowUp } from "~/components/icons"
import { Button } from "~/components/ui/button"

export function ButtonRounded() {
  return (
    <Button class="rounded-full" size="icon" variant="outline">
      <IconArrowUp />
    </Button>
  )
}

Spinner

import { Button } from "~/components/ui/button"
import { Spinner } from "~/components/ui/spinner"

export function ButtonLoading() {
  return (
    <Button disabled size="sm" variant="outline">
      <Spinner /> Submit
    </Button>
  )
}

Button Group

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

import { createSignal } from "solid-js"

import {
  IconArchive,
  IconArrowLeft,
  IconCalendarPlus,
  IconClock,
  IconDots,
  IconFilterPlus,
  IconMailCheck,
  IconTag,
  IconTrash
} from "~/components/icons"
import { Button } from "~/components/ui/button"
import { ButtonGroup } from "~/components/ui/button-group"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuPortal,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger
} from "~/components/ui/dropdown-menu"

export function ButttonGroupDemo() {
  const [label, setLabel] = createSignal("personal")
  return (
    <ButtonGroup>
      <ButtonGroup class="hidden sm:flex">
        <Button aria-label="Go Back" size="icon" variant="outline">
          <IconArrowLeft />
        </Button>
      </ButtonGroup>
      <ButtonGroup>
        <Button variant="outline">Archive</Button>
        <Button variant="outline">Report</Button>
      </ButtonGroup>
      <ButtonGroup>
        <Button variant="outline">Snooze</Button>
        <DropdownMenu placement="bottom-end">
          <DropdownMenuTrigger
            aria-label="More Options"
            as={Button<"button">}
            size="icon"
            variant="outline"
          >
            <IconDots />
          </DropdownMenuTrigger>
          <DropdownMenuContent class="w-52">
            <DropdownMenuGroup>
              <DropdownMenuItem>
                <IconMailCheck />
                Mark as Read
              </DropdownMenuItem>
              <DropdownMenuItem>
                <IconArchive />
                Archive
              </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem>
                <IconClock />
                Snooze
              </DropdownMenuItem>
              <DropdownMenuItem>
                <IconCalendarPlus />
                Add to Calendar
              </DropdownMenuItem>
              <DropdownMenuItem>
                <IconFilterPlus />
                Add to List
              </DropdownMenuItem>
              <DropdownMenuSub overlap>
                <DropdownMenuSubTrigger>
                  <IconTag />
                  Label As...
                </DropdownMenuSubTrigger>
                <DropdownMenuPortal>
                  <DropdownMenuSubContent>
                    <DropdownMenuRadioGroup onChange={setLabel} value={label()}>
                      <DropdownMenuRadioItem value="personal">Personal</DropdownMenuRadioItem>
                      <DropdownMenuRadioItem value="work">Work</DropdownMenuRadioItem>
                      <DropdownMenuRadioItem value="other">Other</DropdownMenuRadioItem>
                    </DropdownMenuRadioGroup>
                  </DropdownMenuSubContent>
                </DropdownMenuPortal>
              </DropdownMenuSub>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuGroup>
              <DropdownMenuItem variant="destructive">
                <IconTrash />
                Trash
              </DropdownMenuItem>
            </DropdownMenuGroup>
          </DropdownMenuContent>
        </DropdownMenu>
      </ButtonGroup>
    </ButtonGroup>
  )
}

Link

You can use the as prop to make another component look like a button. Here's an example of a link that looks like a button.

import { A } from "@solidjs/router";

import { Button } from "~/components/ui/button";

export function LinkAsButton() {
  return (
    <Button as={A} href="/login">
      Login
    </Button>
  );
}

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" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg"`	`"default"`
`as`	`ValidComponent`

Button Group Calendar