Button

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

@react.component
let make = () =>
  <div className="flex flex-wrap items-center gap-2 md:flex-row">

Installation

npmyarnpnpmbun
npx shadcn@latest add @rescript-shadcn/Button
Copy

Usage

Copy<Button variant=Outline> {"Button"->React.string} </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:

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

Examples

Size

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

@react.component
let make = () =>
  <div className="flex flex-col items-start gap-8 sm:flex-row">

Default

@react.component
let make = () => <Button> {"Button"->React.string} </Button>

Outline

@react.component
let make = () => <Button variant=Outline> {"Outline"->React.string} </Button>

Secondary

@react.component
let make = () => <Button variant=Secondary> {"Secondary"->React.string} </Button>

Ghost

@react.component
let make = () => <Button variant=Ghost> {"Ghost"->React.string} </Button>

Destructive

@react.component
let make = () =>
  <Button variant=Destructive> {"Destructive"->React.string} </Button>

Link

@react.component
let make = () => <Button variant=Link> {"Link"->React.string} </Button>

Icon

module LucideIcons = {
  type props = {className?: string, @as("data-icon") dataIcon?: string}

With Icon

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

module TablerIcons = {
  type props = {
    className?: string,

Rounded

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

@react.component
let make = () =>
  <div className="flex gap-2">

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.

@react.component
let make = () =>
  <div className="flex gap-2">

Button Group

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

@@directive("'use client'")

@react.component

Link

You can use the render prop on <Button /> to make another component look like a button. Here's an example of a link that looks like a button.

Remember to set the nativeButton prop to false if you're returning an element that is not a button.

@react.component
let make = () =>
  <Button variant=Secondary size=Sm nativeButton=false render={<a href="#" />}>

API Reference

Button

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