Tags

The <Tag> component renders colored badges. It has built-in support for HTTP methods and supports custom colors.

HTTP Method Tags#

Tags automatically apply the correct color for HTTP methods:

<Tag>

GETPOSTPUTDELETE

HTTP Method Colors#

Method	Color
`GET`	Sky (blue)
`POST`	Emerald (green)
`PUT`	Amber (orange)
`DELETE`	Rose (red)

Custom Colors#

Use the color prop for non-HTTP-method tags:

<Tag>

BetaNewDeprecatedStablev1.2.2

Tag Variants#

The variant prop controls padding size:

<Tag>

Default sizeCompact

Tags in API Reference#

Tags are commonly used in API reference documentation to label HTTP methods:

**GET** `path`

GET /api/users — Retrieve a list of all users.

POST /api/users — Create a new user.

DELETE /api/users/:id — Permanently delete a user.

Or with the Tag component on its own line:

<Tag>

GET

/api/users — Retrieve a list of all users.

Version and Status Tags#

<Tag>

Authentication v2.0

The new authentication system uses OAuth 2.0 with PKCE.

<Tag>

Legacy Auth Deprecated

The API key authentication method is deprecated and will be removed in v3.0.

Chips#

<Chip> is a pill with a brand-colored dot for short, scannable lists such as supported platforms. Wrap several in <ChipGroup> so they flow in rows.

PostgresMySQLMariaDBSQLiteMongoDBRedisClickHouseElasticSearchDuckDB

Props Reference#

Prop	Type	Default	Description
`children`	`string`	—	Tag label text (e.g. `"GET"`, `"Beta"`).
`color`	`string`	Auto-detected	Badge color: `emerald`, `sky`, `amber`, `rose`, `zinc`, `yellow`. HTTP methods auto-apply color.
`variant`	`string`	`'medium'`	Padding size: `medium` or `small`.
`className`	`string`	—	Additional CSS classes.

Was this page helpful?