A clickable element that can function as either a hyperlink or a regular button.

The Button component is a versatile component that can function as either a regular button or an anchor link element. It can be configured in a variety of ways by adjusting properties such as size, color and more.

import { Button } from '@rewind-ui/core';

function App() {
  return (
    <Button shadow="base">
      Click me!


Import the Button component using the following import statement.

import { Button } from '@rewind-ui/core';


The Button component comes with a number of pre-defined variants that can be used to change the appearance of the component. The variants can be used by passing the variant name as a prop to the component. A variant is basically a pre-set set of properties. Read more about variants here.

Available variants are: primary, secondary, tertiary, link, danger, success, warning and info.

  <Button variant="primary">Primary</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="tertiary">Tertiary</Button>
  <Button variant="link">Link</Button>
  <Button variant="danger">Danger</Button>
  <Button variant="success">Success</Button>
  <Button variant="warning">Warning</Button>
  <Button variant="info">Info</Button>

Tones & Colors

The Button component comes with four tones: solid, light, outline and transparent.

The available color values are: white, blue, red, green, yellow, purple, gray, dark and black.


  <Button color="white">White</Button>
  <Button color="blue">Blue</Button>
  <Button color="red">Red</Button>
  <Button color="green">Green</Button>
  <Button color="yellow">Yellow</Button>
  <Button color="purple">Purple</Button>
  <Button color="gray">Gray</Button>
  <Button color="dark">Dark</Button>
  <Button color="black">Black</Button>


  <Button tone="light" color="white">White</Button>
  <Button tone="light" color="blue">Blue</Button>
  <Button tone="light" color="red">Red</Button>
  <Button tone="light" color="green">Green</Button>
  <Button tone="light" color="yellow">Yellow</Button>
  <Button tone="light" color="purple">Purple</Button>
  <Button tone="light" color="gray">Gray</Button>
  <Button tone="light" color="dark">Dark</Button>
  <Button tone="light" color="black">Black</Button>


  <Button tone="outline" color="white">White</Button>
  <Button tone="outline" color="blue">Blue</Button>
  <Button tone="outline" color="red">Red</Button>
  <Button tone="outline" color="green">Green</Button>
  <Button tone="outline" color="yellow">Yellow</Button>
  <Button tone="outline" color="purple">Purple</Button>
  <Button tone="outline" color="gray">Gray</Button>
  <Button tone="outline" color="dark">Dark</Button>
  <Button tone="outline" color="black">Black</Button>


  <Button tone="transparent" color="white">White</Button>
  <Button tone="transparent" color="blue">Blue</Button>
  <Button tone="transparent" color="red">Red</Button>
  <Button tone="transparent" color="green">Green</Button>
  <Button tone="transparent" color="yellow">Yellow</Button>
  <Button tone="transparent" color="purple">Purple</Button>
  <Button tone="transparent" color="gray">Gray</Button>
  <Button tone="transparent" color="dark">Dark</Button>
  <Button tone="transparent" color="black">Black</Button>


Available size values are: xs, sm, md and lg.

  <Button size="xs">Button</Button>
  <Button size="sm">Button</Button>
  <Button size="md">Button</Button>
  <Button size="lg">Button</Button>


Available radius values are: none, sm, md, lg and full.

  <Button radius="none">Button</Button>
  <Button radius="sm">Button</Button>
  <Button radius="md">Button</Button>
  <Button radius="lg">Button</Button>
  <Button radius="full">Button</Button>


Available shadow values are: none, xs, sm, md and lg.

  <Button shadow="none">Button</Button>
  <Button shadow="sm">Button</Button>
  <Button shadow="base">Button</Button>
  <Button shadow="md">Button</Button>
  <Button shadow="lg">Button</Button>
  <Button shadow="xl">Button</Button>

Shadow colors

Available shadowColor values are: blue, red, green, yellow, purple, gray, dark and black.

  <Button shadow="lg" color="blue" shadowColor="blue">Button</Button>
  <Button shadow="lg" color="red" shadowColor="red">Button</Button>
  <Button shadow="lg" color="green" shadowColor="green">Button</Button>
  <Button shadow="lg" color="yellow" shadowColor="yellow">Button</Button>
  <Button shadow="lg" color="purple" shadowColor="purple">Button</Button>
  <Button shadow="lg" color="gray" shadowColor="gray">Button</Button>
  <Button shadow="lg" color="dark" shadowColor="dark">Button</Button>
  <Button shadow="lg" color="black" shadowColor="black">Button</Button>


Button component supports disabled and loading states.

  <Button disabled>Button</Button>
  <Button loading>Button</Button>


If your button children contain just an icon, you can use the icon prop to make your button square.

  <Button size="xs" icon>...</Button>
  <Button size="sm" icon>...</Button>
  <Button size="md" icon>...</Button>
  <Button size="lg" icon>...</Button>


You can add a ring to the Button by setting the withRing prop to true.

  <Button withRing={true}>Click me!</Button>
  <Button withRing={false}>Click me!</Button>


Available animation values are: pulse and bounce.

  <Button animation="pulse">Button</Button>
  <Button animation="bounce">Button</Button>


The Button component is a polymorphic component. This means that you can use it as a button, a link or any html element. You can use the as prop to change the underlying html element.



The Button component supports the ref prop, which allows for obtaining a reference to the associated underlying HTML element.

import { useRef } from 'react';
import { Button } from '@rewind-ui/core';

function App() {
  const ref = useRef<HTMLButtonElement>(null);
  return <Button ref={ref}>Click me!</Button>;


Full width

  <Button className="w-full">Click me!</Button>

On click event

  <Button onClick={() => alert('Hello World!')}>Click me!</Button>

Classname overrides

To avoid completely overwriting the default styles, the className prop can be used to override the default classes. Rewind-UI is using tailwind-merge to merge the default classes with the classes you provide in the className prop and resolve any possible conflicts.

  <Button className="text-white bg-pink-500 focus:bg-pink-600 hover:bg-pink-600 active:bg-pink-600/90 focus:ring-pink-300">
    I am pink

API Reference


All known button properties (e.g. type="submit") can be used on the Button component. Furthermore, the following properties are also supported:

animationButtonAnimationSets the animation typenone
colorButtonColorSets the colordark
disabledbooleanDisables buttonfalse
iconbooleanMakes the button a perfect square in case the button contains just an icon instead of textfalse
loadingbooleanShows a loading spinner and disables the buttonfalse
radiusButtonRadiusSets the border radiusmd
shadowButtonShadowSets the shadow sizenone
shadowColorButtonShadowColorSets the shadow colornone
sizeButtonSizeSets the button sizemd
toneButtonToneSets the button tonesolid
variantButtonVariantSets the button variantundefined
withRingbooleanShows a ring around the button on active statetrue


The Button component supports all known button events (e.g. onClick, onMouseEnter, onMouseLeave, onFocus, onBlur, etc.).


type ButtonAnimation = 'none' | 'pulse' | 'bounce';
type ButtonColor =
  | 'white'
  | 'blue'
  | 'red'
  | 'green'
  | 'yellow'
  | 'purple'
  | 'gray'
  | 'dark'
  | 'black';
type ButtonRadius = 'none' | 'sm' | 'base' | 'md' | 'lg' | 'full';
type ButtonShadow = 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl';
type ButtonShadowColor =
  | 'none'
  | 'white'
  | 'blue'
  | 'red'
  | 'green'
  | 'yellow'
  | 'purple'
  | 'gray'
  | 'dark'
  | 'black';
type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
type ButtonTone = 'solid' | 'light' | 'outline' | 'transparent';
type ButtonVariant =
  | 'primary'
  | 'secondary'
  | 'tertiary'
  | 'link'
  | 'danger'
  | 'success'
  | 'warning'
  | 'info';