Components

Button

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

   

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 component comes with four different sizes: xs, sm, md, lg, and xl.

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

export default () => (
  <>
    <p>xs</p>
    <Button size="xs" onClick={() => console.log("clicked")}>
      Read more
    </Button>
    <p>sm</p>
    <Button size="sm" onClick={() => console.log("clicked")}>
      Read more
    </Button>
    <p>md</p>
    <Button size="md" onClick={() => console.log("clicked")}>
      Read more
    </Button>
    <p>lg</p>
    <Button size="lg" onClick={() => console.log("clicked")}>
      Read more
    </Button>
    <Button size="xl" onClick={() => console.log("clicked")}>
      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} onClick={() => console.log("clicked")}>
    Refresh data
  </Button>
);

Usage example primary and secondary button

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

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>
    <Card className="max-w-sm">
      <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>
      <Footer>
        <Flex justifyContent="end" className="space-x-2">
          <Button
            size="xs"
            variant="secondary"
            onClick={() => console.log("clicked")}
          >
            Read more
          </Button>

          <Button
            size="xs"
            variant="primary"
            onClick={() => console.log("clicked")}
          >
            View more
          </Button>
        </Flex>
      </Footer>
    </Card>
  </>
);

API Reference: Button