Tag - Aragon Developers Documentation

Search…

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
TYPE
DEFAULT VALUE
"indicator", "identifier", "new" or "activity"
"indicator"
Set of predefined color, background and size combinations (which can be overridden by the corresponding props).
size
TYPE
DEFAULT VALUE
"normal" or "small"
Depends of the current mode
Defines size and padding for the rendered component.
color
TYPE
DEFAULT VALUE
String (color)
Depends of the current mode
The text color.
background
TYPE
DEFAULT VALUE
String (color)
Depends of the current mode
The background color.
uppercase
TYPE
DEFAULT VALUE
Boolean
true
Defines the text style uppercase transformation for the contents.
limitDigits
TYPE
DEFAULT VALUE
Boolean or Number
false
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
TYPE
DEFAULT VALUE
React node
None
The label of the Tag.
icon
TYPE
DEFAULT VALUE
React node
None
The icon to be displayed in the label. It can be used alone or with label.
children
TYPE
DEFAULT VALUE
React node
None
The child content (takes priority over label and icon).

TransactionBadge

Accordion

Last modified 2mo ago

Copy link

Outline

Usage

Props

Usage

Props

`mode`

`size`

`color`

`background`

`uppercase`

`limitDigits`

`label`

`icon`

`children`