Components / Data Display / Tag — Carla Design System

Main navigation
Intro
OverviewGetting StartedConfiguration
Design Language
ValuesPrinciplesColorsTypographyIconsIllustrations
Guides
StylingThemingLayout
Components
Core
ClickElIconButtonLabelText
Layout
BoxGridSpacer
Actions
ActionButtonActionLinkFloatingActionButton
Forms
CheckboxCheckboxCardFileInputNumberInputRadioRadioCardRadioGroupSelectInputSliderSmallCardSortingSelectorTextAreaTextInput
Disclosure
AccordionCarouselModalOverlayVisuallyHidden
Data Display
BadgeCardInfoMessageTag
Feedback
LoadingLoadingBar
Media
LogoIconsIllustrations
Components / Data Display / Tag
TagAPI ReferenceProp
Type
Default
Description
children
React.ReactNode
extend
unknown
href
string | Record<string, unknown>
isRemovable
boolean
false
onClick
React.MouseEventHandler<Element>
ExamplesNon clickable
Dark Mode
Open in Playroom
<Box direction="row" space={3}>
  <Tag>Some tag</Tag>
  <Tag isRemovable>Some tag</Tag>
</Box>
Clickable
Dark Mode
Open in Playroom
<Box direction="row" space={3}>
  <Tag onClick={() => {}}>Some tag</Tag>
  <Tag onClick={() => {}} isRemovable>
    Some tag
  </Tag>
</Box>
Table of Contents
API Reference
Examples
Non clickable
Clickable

Prop	Type	Default
children	React.ReactNode
extend	unknown
href	string \| Record<string, unknown>
isRemovable	boolean	false
onClick	React.MouseEventHandler<Element>