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.
import { Main, Tag } from '@aragon/ui'
function App() {
return (
<Main>
<Tag mode="new">New update</Tag>
</Main>
)
}
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).
TYPE | DEFAULT VALUE |
|---|---|
"normal" or "small" | Depends of the current mode |
Defines size and padding for the rendered component.
TYPE | DEFAULT VALUE |
|---|---|
String (color) | Depends of the current mode |
The text color.
TYPE | DEFAULT VALUE |
|---|---|
String (color) | Depends of the current mode |
The background color.
TYPE | DEFAULT VALUE |
|---|---|
Boolean | true |
Defines the text style uppercase transformation for the contents.
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.TYPE | DEFAULT VALUE |
|---|---|
React node | None |
The label of the Tag.
TYPE | DEFAULT VALUE |
|---|---|
React node | None |
The icon to be displayed in the label. It can be used alone or with
label.TYPE | DEFAULT VALUE |
|---|---|
React node | None |
The child content (takes priority over
label and icon).Last modified 6mo ago