Tabler React 2 Docs

Ribbons

Ribbons

You can assign a ribbon to a card to display a small badge.

Signature

import { Ribbon } from "tabler-react-2";


<Ribbon {...props}>{children}</Ribbon>;

Props

PropRequiredTypeDefaultDescription
variantNoColorprimaryThe color variant of the ribbon.
colorNoColorThe color variant of the ribbon. Alias of variant
contentNoReact.ReactNodeThe content to display in the ribbon.
positionNoStringThe position of the ribbon.

Basic Usage

The Ribbon component is used to display a ribbon.

<Card>
  Ribbon
  <Ribbon />
</Card>

Variants

You can pass a variant prop to the Ribbon component to change the color of the ribbon.

<Card>
primary
  <Ribbon variant="primary" />
</Card>
<Card>
secondary
  <Ribbon variant="secondary" />
</Card>

Positions

You can pass a position prop to the Ribbon component to change the position of the ribbon.

<Card>
  <Ribbon position="top">top</Ribbon>
</Card>
<Card>
  <Ribbon position="start">start</Ribbon>
</Card>
<Card>
  <Ribbon position="end">end</Ribbon>
</Card>

Shapes

You can pass a shape prop to the Ribbon component to change the shape of the ribbon.

<Card>
  <span>Ribbon</span>
  <Ribbon shape="bookmark" />
</Card>
<Card>
  <span>Ribbon</span>
  <Ribbon />
</Card>

Custom Content

You can pass a content prop to the Ribbon component to change the content of the ribbon.

<Card>
  <Ribbon content={<IconAerialLift />}>Ribbon</Ribbon>
</Card>
Edit this page on GitHub

Prev

Hook-driven confirm

Next

Spinners

On this page