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).
Copy link
Outline
Usage
Props