Tag

A non-interactive component that can be used to display a small piece of information: general indicators, app / account identifiers, updates, or activity counters.

Usage

import { Main, Tag } from '@aragon/ui'

function App() {
  return (
    <Main>
      <Tag mode="new">New update</Tag>
    </Main>
  )
}

Props

mode

Set of predefined color, background and size combinations (which can be overridden by the corresponding props).

size

Defines size and padding for the rendered component.

color

The text color.

background

The background color.

uppercase

Defines the text style uppercase transformation for the contents.

limitDigits

Use this to pass a number as the label prop of the Tag, and limit it to a certain number of digits. For example, 250 will be displayed as “99+” if the number of digits is 2.

Set to true for the default number of digits (2), or set to the desired number.

label

The label of the Tag.

icon

The icon to be displayed in the label. It can be used alone or with label.

children

The child content (takes priority over label and icon).

Last updated