Button

A Button is used to trigger an action as well as navigation.

Storybook GitHub

Get as Copy & Paste

Button variant: "primary"

Button variant: "secondary"

Button variant: "light"

Button with icon

Button loading state

Button with icon and light variant

Button disabled state

Button disabled state and tooltip

import { RiArrowRightLine, RiSearch2Line } from '@remixicon/react';import { Button } from '@tremor/react';
export const ButtonHero = () => (  <div className="mx-auto grid grid-cols-1 gap-12">    <div className="space-y-3">      <p className="text-center font-mono text-sm text-slate-500">        Button variant: "primary"      </p>      <div className="flex justify-center">        <Button variant="primary">Search</Button>      </div>    </div>    <div className="space-y-3">      <p className="text-center font-mono text-sm text-slate-500">        Button variant: "secondary"      </p>      <div className="flex justify-center">        <Button variant="secondary">Search</Button>      </div>    </div>    <div className="space-y-3">      <p className="text-center font-mono text-sm text-slate-500">        Button variant: "light"      </p>      <div className="flex justify-center">        <Button variant="light">Search</Button>      </div>    </div>    <div className="space-y-3">      <p className="text-center font-mono text-sm text-slate-500">        Button with icon      </p>      <div className="flex justify-center">        <Button variant="secondary" icon={RiSearch2Line}>          Search        </Button>      </div>    </div>    <div className="space-y-3">      <p className="text-center font-mono text-sm text-slate-500">        Button loading state      </p>      <div className="flex justify-center">        <Button variant="primary" loading={true}>          Search        </Button>      </div>    </div>    <div className="space-y-3">      <p className="text-center font-mono text-sm text-slate-500">        Button with icon and light variant      </p>      <div className="flex justify-center">        <Button icon={RiArrowRightLine} iconPosition="right" variant="light">          View more        </Button>      </div>    </div>    <div className="space-y-3">      <p className="text-center font-mono text-sm text-slate-500">        Button disabled state      </p>      <div className="flex justify-center">        <Button icon={RiSearch2Line} disabled={true}>          Search        </Button>      </div>    </div>    <div className="space-y-3">      <p className="text-center font-mono text-sm text-slate-500">        Button disabled state and tooltip      </p>      <div className="flex justify-center">        <Button icon={RiSearch2Line} disabled={true} tooltip="Disabled">          Search        </Button>      </div>    </div>  </div>);

Import Button

Tremor exports one component for Button:

import { Button } from '@tremor/react';

Usage example primary button with icon

The example below shows a Button component with an icon imported from remixicon.com.

import { RiRefreshLine } from '@remixicon/react';import { Button } from '@tremor/react';
export function ButtonUsageExampleWithIcon() {  return (    <div className="flex justify-center">      <Button icon={RiRefreshLine}>Refresh data</Button>    </div>  );

Usage example primary and secondary button

Two Button components with variant="secondary" and variant="primary" combined within a Card component.

Sales

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

import { Button, Card, Flex, Text, Title } from '@tremor/react';
export function ButtonUsageExampleWithVariants() {  return (    <Card className="mx-auto max-w-lg">      <h4 className="text-tremor-content-strong dark:text-dark-tremor-content-strong font-medium">Sales</h4>      <p className="mt-1 leading-6 text-tremor-default text-tremor-content dark:text-dark-tremor-content">        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam        erat, sed diam voluptua.      </p>      <div className="mt-8 flex items-center justify-end space-x-2">        <Button size="xs" variant="secondary">          Read more        </Button>        <Button size="xs" variant="primary">          View more        </Button>      </div>    </Card>  );}

API Reference: Button

client component

icon: Set an icon.

iconPosition: Controls the position of an icon.

size: Set size of a button.

color: Set the color of the button.

variant: Sets the style of the button.

disabled: Set the state of the button to disabled.

loading: If set to true, an animated spinner is shown. If an icon is used in the button, the icon is replaced by the spinner if property is set.

loadingText: Text shown if loading property is set to true.

tooltip: Set a tooltip on hover.

Theming

Button Primary

Element	Theme Token
Shadow boxShadowtremor-input	boxShadowtremor-input
Roundness borderRadiustremor-default	borderRadiustremor-default
Text color colorstremor-brand-inverted	colorstremor-brand-inverted
Background color colorstremor-brand-DEFAULT	colorstremor-brand-DEFAULT
Background color hover colorstremor-brand-emphasis	colorstremor-brand-emphasis
Border color colorstremor-brand-DEFAULT	colorstremor-brand-DEFAULT
Border color hover colorstremor-brand-emphasis	colorstremor-brand-emphasis

Button Secondary

Element	Theme Token
Shadow boxShadowtremor-input	boxShadowtremor-input
Roundness borderRadiustremor-default	borderRadiustremor-default
Text color colorstremor-brand-DEFAULT	colorstremor-brand-DEFAULT
Text color hover colorstremor-brand-emphasis	colorstremor-brand-emphasis
Background color hover colorstremor-brand-faint	colorstremor-brand-faint
Border color colorstremor-brand-DEFAULT	colorstremor-brand-DEFAULT

Button Light

Element	Theme Token
Text color colorstremor-brand-DEFAULT	colorstremor-brand-DEFAULT
Text color hover colorstremor-brand-emphasis	colorstremor-brand-emphasis