diff --git a/docs/src/pages/components/Tag.svx b/docs/src/pages/components/Tag.svx index b9933b40..ae87dd44 100644 --- a/docs/src/pages/components/Tag.svx +++ b/docs/src/pages/components/Tag.svx @@ -1,19 +1,31 @@ +--- +components: ["Tag", "TagSkeleton"] +--- + +`Tag` provides a way to categorize content with a keyword or label. It supports various styles, sizes, and interactive states, including filterable and interactive variants. + ## Default +Create a basic tag with text content. + IBM Cloud ## Small size +Use the small size variant for more compact layouts. + IBM Cloud ## Tag types +Choose from a variety of color types to match your design system. + red magenta purple @@ -29,37 +41,45 @@ ## Filterable +Create a filterable tag with a close button that dispatches a `close` event when clicked. + carbon-components ## Filterable (disabled) +Disable a filterable tag to prevent interaction. + carbon-components ## Filterable (small) +Combine the filterable variant with the small size. + carbon-components ## Custom icon -Note: rendering a custom icon cannot be used with the filterable variant. +Add a custom icon to the tag. Note: custom icons cannot be used with the filterable variant. IBM Cloud ## Interactive variant -Set `interactive` to `true` to render a `button` element instead of a `div`. +Set `interactive` to `true` to render a `button` element instead of a `div`. This is useful for clickable tags. Machine learning ## Disabled -The filterable and interactive tag variants have a disabled state. +Both filterable and interactive tag variants support a disabled state. Machine learning Machine learning ## Tooltip in a tag +Embed a tooltip within a tag to provide additional context. + Armonk @@ -68,8 +88,12 @@ The filterable and interactive tag variants have a disabled state. ## Skeleton +Show a loading state with the default skeleton variant. + ## Skeleton (small) +Show a loading state with the small skeleton variant. + \ No newline at end of file