1. Components
  2. Button

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.

xs

sm

md

lg

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

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

Button Secondary

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

Button Light

Text color
colorstremor-brand-DEFAULT
Text color hover
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.