diff --git a/.changeset/fresh-keys-attend.md b/.changeset/fresh-keys-attend.md new file mode 100644 index 0000000000..ba8aed70e1 --- /dev/null +++ b/.changeset/fresh-keys-attend.md @@ -0,0 +1,5 @@ +--- +'@marigold/docs': patch +--- + +docs[DST-514]: Revise `` component page diff --git a/docs/content/components/collection/tag/tag-appearance.demo.tsx b/docs/content/components/collection/tag/tag-appearance.demo.tsx new file mode 100644 index 0000000000..33bec48225 --- /dev/null +++ b/docs/content/components/collection/tag/tag-appearance.demo.tsx @@ -0,0 +1,10 @@ +import { Tag } from '@marigold/components'; + +export default () => ( + + News + Travel + Gaming + Shopping + +); diff --git a/docs/content/components/collection/tag/tag.mdx b/docs/content/components/collection/tag/tag.mdx index f66b65a478..8dedfa53e8 100644 --- a/docs/content/components/collection/tag/tag.mdx +++ b/docs/content/components/collection/tag/tag.mdx @@ -1,26 +1,47 @@ --- title: Tag caption: Component for categorize content +badge: updated --- -A `` is a content component. This component can be used to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request. +A `` is a small, interactive element that displays a piece of information, typically formatted as a label or badge, it can indicate to different types, statuses, or categories. -## Usage +## Anatomy -### Import +Tags are comprised of container, tag label and dismissable tags include an additional close icon. -To import the component you just have to use this code below. +Anatomy of a tag -```tsx -import { Tag } from '@marigold/components'; -``` +## Appearance -### Appearance + +- **Tag container:** This is the primary element that holds content and icons. + +- **Tag label:** Short descriptive text describing the tag. + +- **Remove icon:** Optional icon to remove the tag. + +## Usage + +Tags are components that are often used to label different items, create categorization, filter data, select or deselect options. + +### Optimal number of tags + +When using tags, it’s important to limit the number to avoid overwhelming the user. A general guideline is to use up to 10-15 tags in a single group. This ensures clarity and prevents the intperface from becoming cluttered, making it easier for users to scan and understand the categorized information. + ## Props + + ### Tag @@ -29,8 +50,6 @@ import { Tag } from '@marigold/components'; -## Examples - ### Tags with a label In this example we have the `` component that has been given the `label`. @@ -42,3 +61,39 @@ In this example we have the `` component that has been given the `label`. In this example, the `` component receives tags from a dynamic collection and can remove these tags. + +## Alternative components + +
    +
  • + [Badge](/components/content/badge): Small indicator often used to show a + status, count, or notification on another UI element. It's typically less + interactive than a Tag and used for highlighting numbers or statuses. +
  • +
+ +## Related + + + + + ), + }, + ]} +/> diff --git a/docs/public/tag/c.jpg b/docs/public/tag/c.jpg new file mode 100644 index 0000000000..78b21505fd Binary files /dev/null and b/docs/public/tag/c.jpg differ diff --git a/docs/public/tag/tag-anatomy.jpg b/docs/public/tag/tag-anatomy.jpg new file mode 100644 index 0000000000..3e40d71934 Binary files /dev/null and b/docs/public/tag/tag-anatomy.jpg differ