Tag
Callouts provide presentation of content in a visually distinct manner. Includes a heading, icon and typically text-based content.
![Screenshot of component Tag basic](/static/7105fb723621dc649a519a91f1a5c8f2/Tag-basic-desktop.png)
Usage
Tag
is passed text and rendered in a small neutral bubble by default.
import { Tag } from '@blueprintjs/core' <Tag > Firmware 1.0</Tag >
Size
The size of the label has a toggle with the large
property.
![Screenshot of component Tag normal](/static/50fb23be848fe43525c8cd99c8d7afef/Tag-normal-desktop.png)
![Screenshot of component Tag large](/static/fd6a373368d9bf18f752cc453229c2b2/Tag-large-desktop.png)
<Tag large >Bigger and better</Tag >
Use fill
to span the width of the parent container.
![Screenshot of component Tag fill](/static/3e9dd12fe71d421053a88ec8da769513/Tag-fill-desktop.png)
<Tag fill >Long text goes here</Tag >
Intent
Tags have configurable intent settings for colour control.
![Screenshot of component Tag with-default-intent](/static/8af41135fe2b5938f21a79c6057e49a8/Tag-with-default-intent-desktop.png)
![Screenshot of component Tag with-primary-intent](/static/9a662af96779c6020111cb13b0ed6f37/Tag-with-primary-intent-desktop.png)
![Screenshot of component Tag with-success-intent](/static/b9875541d5483c573e5c9c5061e56985/Tag-with-success-intent-desktop.png)
![Screenshot of component Tag with-warning-intent](/static/7fff03734e2f46ab021d26f691424aa5/Tag-with-warning-intent-desktop.png)
![Screenshot of component Tag with-danger-intent](/static/cb602061000a7fce3f57cd05df070d29/Tag-with-danger-intent-desktop.png)
<Tag intent ="warning"> Electronics might be on fire!</Tag >
As with all other components, the intent
prop also accepts an enum value.
import { Tag , Intent } from '@blueprintjs/core' <Tag intent ={Intent .DANGER }> Yep, that's smoke...</Tag >
Minimal Appearance
The minimal
prop reduces the visual impact of the Tag by reducing contrast.
![Screenshot of component Tag minimal](/static/bce04b7e02af0fd1799160b65a12e614/Tag-minimal-desktop.png)
<Tag minimal >Subtle styling</Tag >
Use of minimal
will override intent
colouring for a softer appearance.
![Screenshot of component Tag minimal-primary-intent](/static/8df28e5450f1cf126e43c750733ebdd9/Tag-minimal-primary-intent-desktop.png)
![Screenshot of component Tag minimal-success-intent](/static/0d9afde0c621a8f7f83da15ec11cbbf1/Tag-minimal-success-intent-desktop.png)
![Screenshot of component Tag minimal-warning-intent](/static/6b2bd066ea9dd819e78c2b155d263ec0/Tag-minimal-warning-intent-desktop.png)
![Screenshot of component Tag minimal-danger-intent](/static/fea9ef4a27194f9ca753daede3ca5341/Tag-minimal-danger-intent-desktop.png)
Icon
Add an icon
or rightIcon
by specifying the name of the icon as a string or IconNames
enum value.
![Screenshot of component Tag with-icon](/static/59aa2699ca4688779fde586cd14e8318/Tag-with-icon-desktop.png)
![Screenshot of component Tag with-icon-right](/static/cae6c7331519fa8d4e194a01e82f5400/Tag-with-icon-right-desktop.png)
import { IconNames } from "@blueprintjs/icons"; <Tag icon ={IconNames .AIRPLANE }> Is it a bird?</Tag >
<Tag rightIcon ="airplane"> Is it a plane?</Tag >