mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(tag): improve docs

Browse source
This commit is contained in:
Eric Liu 2025-05-03 10:52:05 -07:00
commit 303786dcd5
1 changed files with 27 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

30
docs/src/pages/components/Tag.svx
View file

@ -1,19 +1,31 @@
---
components: ["Tag", "TagSkeleton"]
---
<script> <script>
import { Tag, TooltipDefinition } from "carbon-components-svelte"; import { Tag, TooltipDefinition } from "carbon-components-svelte";
import IbmCloud from "carbon-icons-svelte/lib/IbmCloud.svelte"; import IbmCloud from "carbon-icons-svelte/lib/IbmCloud.svelte";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
`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 ## Default
Create a basic tag with text content.
<Tag>IBM Cloud</Tag> <Tag>IBM Cloud</Tag>
## Small size ## Small size
Use the small size variant for more compact layouts.
<Tag size="sm">IBM Cloud</Tag> <Tag size="sm">IBM Cloud</Tag>
## Tag types ## Tag types
Choose from a variety of color types to match your design system.
<Tag type="red">red</Tag> <Tag type="red">red</Tag>
<Tag type="magenta">magenta</Tag> <Tag type="magenta">magenta</Tag>
<Tag type="purple">purple</Tag> <Tag type="purple">purple</Tag>
@ -29,37 +41,45 @@
## Filterable ## Filterable
Create a filterable tag with a close button that dispatches a `close` event when clicked.
<Tag filter on:close>carbon-components</Tag> <Tag filter on:close>carbon-components</Tag>
## Filterable (disabled) ## Filterable (disabled)
Disable a filterable tag to prevent interaction.
<Tag filter disabled on:close>carbon-components</Tag> <Tag filter disabled on:close>carbon-components</Tag>
## Filterable (small) ## Filterable (small)
Combine the filterable variant with the small size.
<Tag size="sm" filter on:close>carbon-components</Tag> <Tag size="sm" filter on:close>carbon-components</Tag>
## Custom icon ## 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.
<Tag icon={IbmCloud}>IBM Cloud</Tag> <Tag icon={IbmCloud}>IBM Cloud</Tag>
## Interactive variant ## 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.
<Tag interactive>Machine learning</Tag> <Tag interactive>Machine learning</Tag>
## Disabled ## Disabled
The filterable and interactive tag variants have a disabled state. Both filterable and interactive tag variants support a disabled state.
<Tag filter disabled>Machine learning</Tag> <Tag filter disabled>Machine learning</Tag>
<Tag interactive disabled>Machine learning</Tag> <Tag interactive disabled>Machine learning</Tag>
## Tooltip in a tag ## Tooltip in a tag
Embed a tooltip within a tag to provide additional context.
<Tag> <Tag>
<TooltipDefinition tooltipText="IBM Corporate Headquarters is based in Armonk, New York."> <TooltipDefinition tooltipText="IBM Corporate Headquarters is based in Armonk, New York.">
Armonk Armonk
@ -68,8 +88,12 @@ The filterable and interactive tag variants have a disabled state.
## Skeleton ## Skeleton
Show a loading state with the default skeleton variant.
<Tag skeleton /> <Tag skeleton />
## Skeleton (small) ## Skeleton (small)
Show a loading state with the small skeleton variant.
<Tag size="sm" skeleton /> <Tag size="sm" skeleton />