Components

Footer

Adds a footer section to a component's layout.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor lorem non est congue blandit. Praesent non lorem sodales, suscipit est sed, hendrerit dolor.

I am a placeholder for footer content.

Import Footer

Tremor exports one component for Footer.

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

Anatomy

How the basic component is pieced together displaying all properties with their default values.

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

export default () => (
  <Footer
    height="h-20"
    >
        
  </Footer>
);

Usage example

The example below shows a composition of a KPI card with the components Card, Metric, Text, Footer, Flex, and Button.

Ticket Sales

$ 34,743

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

export default () => (
  <Card maxWidth="max-w-sm">
    <Text>Ticket Sales</Text>
    <Metric>$ 34,743</Metric>
    <Footer height="h-16">
      <Flex justifyContent="justify-end">
        <Button text="See detailed report" size="xs" importance="secondary" />
      </Flex>
    </Footer>
  </Card>
);

API Reference: Footer

heightoptional
Description: Control the height of the component.
Type: string
Default: h-20
Values

Dropdown Icons