UI

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:

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.

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.

API Reference: Button

client component
icon
React.ElementType
Set an icon.
iconPosition
string
Controls the position of an icon.
size
string
Set size of a button.
color
Color
Set the color of the button.
variant
string
Sets the style of the button.
disabled
boolean
Set the state of the button to disabled.
loading
boolean
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
string
Text shown if loading property is set to true.
tooltip
string
Set a tooltip on hover.

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