Components

Button

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

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 Button

Tremor exports one component for Button:

Button: Simple button design for main navigation or actions

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

Button sizes

Each Button has five different sizes: xs, sm, md, lg, and xl.

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

export default () => (
  <>
    <p>xs</p>
    <Button size="xs">Read more</Button>
    <p>sm</p>
    <Button size="sm">Read more</Button>
    <p>md</p>
    <Button size="md">Read more</Button>
    <p>lg</p>
    <Button size="lg">Read more</Button>
    <Button size="xl">Read more</Button>
  </>
);

Usage example primary button with icon

The example below shows a Button component with an Icon imported from heroicons.com.

import { Button } from "@tremor/react";
import { RefreshIcon } from "@heroicons/react/outline";

export default () => <Button icon={RefreshIcon}>Refresh data</Button>;

Usage example primary and secondary button

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

Card with Button versions.

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. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

import { Card, Title, Text, Flex, Button } from "@tremor/react";

export default () => (
  <>
    <p className="text-slate-500 text-sm text-center font-mono">Card with Button versions.</p>
    <p className="text-slate-500 text-sm text-center font-mono">Card with Button versions.</p>
    <Card className="max-w-sm mx-auto">
      <Title>Sales</Title>
      <Text>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam
        et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est
        Lorem ipsum dolor sit amet.{" "}
      </Text>
      <Flex justifyContent="end" className="space-x-2 border-t pt-4 mt-8">
        <Button size="xs" variant="secondary">
          Read more
        </Button>

        <Button size="xs" variant="primary">
          View more
        </Button>
      </Flex>
    </Card>
  </>
);

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

API Reference: Button

client component

iconoptional
Description: Set an icon.
Type: React.ElementType
Default
Values

iconPositionoptional
Description: Controls the position of an icon.
Type: string
Default: left
Values: left, right

sizeoptional
Description: Set size of a button.
Type: string
Default: sm
Values: xs, sm, md, lg, xl

coloroptional
Description: Set the color of the button.
Type: string
Default: blue
Values: See color props

variantoptional
Description: Sets the style of the button.
Type: string
Default: primary
Values: primary, secondary, light

disabledoptional
Description: Set the state of the button to disabled.
Type: boolean
Default: false
Values: true, false

loadingoptional
Description: 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.
Type: boolean
Default: false
Values: true, false

loadingTextoptional
Description: Text shown if loading property is set to true.
Type: string
Default
Values

tooltipoptional
Description: Set a tooltip on hover.
Type: string
Default: false
Values: true, false

Need help? You can also ask the community on GitHub Discussions or Slack.

Bar List Callout