Skip to main content

​
Tag

The Tag component (formerly ContextualBadge) displays small, colored labels used to categorize content, show status, or highlight important information.

​
Import

import { Tag } from '@naturacosmeticos/natds-web';

​
Usage

​
Basic Tag

import { Tag } from '@naturacosmeticos/natds-web';

function Example() {
  return (
    <Tag id="basic-tag" color="primary">
      New
    </Tag>
  );
}

​
Tag with Different Colors

import { Tag } from '@naturacosmeticos/natds-web';

function ColorExamples() {
  return (
    <>
      <Tag id="primary" color="primary">Primary</Tag>
      <Tag id="secondary" color="secondary">Secondary</Tag>
      <Tag id="success" color="success">Success</Tag>
      <Tag id="error" color="error">Error</Tag>
      <Tag id="warning" color="warning">Warning</Tag>
      <Tag id="info" color="info">Info</Tag>
    </>
  );
}

​
Tag Sizes

import { Tag } from '@naturacosmeticos/natds-web';

function SizeExamples() {
  return (
    <>
      <Tag id="small" color="primary" size="small">
        Small
      </Tag>
      <Tag id="standard" color="primary" size="standard">
        Standard
      </Tag>
    </>
  );
}

​
Tag Positions

import { Tag } from '@naturacosmeticos/natds-web';

function PositionExamples() {
  return (
    <>
      <Tag id="default" color="primary" position="default">
        Default
      </Tag>
      <Tag id="left" color="primary" position="left">
        Left
      </Tag>
    </>
  );
}

​
Colors

Tag supports eight color variants to convey different meanings: 
import { Tag } from '@naturacosmeticos/natds-web';

function AllColors() {
  return (
    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
      <Tag id="primary" color="primary">Primary</Tag>
      <Tag id="secondary" color="secondary">Secondary</Tag>
      <Tag id="info" color="info">Info</Tag>
      <Tag id="success" color="success">Success</Tag>
      <Tag id="warning" color="warning">Warning</Tag>
      <Tag id="error" color="error">Error</Tag>
      <Tag id="light" color="light">Light</Tag>
      <Tag id="dark" color="dark">Dark</Tag>
    </div>
  );
}
Available colors: primary, secondary, info, success, warning, error, light, dark

​
Sizes

Tag is available in two sizes: 
import { Tag } from '@naturacosmeticos/natds-web';

function Sizes() {
  return (
    <>
      <Tag id="small" color="primary" size="small">
        Small Tag
      </Tag>
      <Tag id="standard" color="primary" size="standard">
        Standard Tag
      </Tag>
    </>
  );
}
Available sizes: small (default), standard

​
Positions

Control the alignment of the tag: 
import { Tag } from '@naturacosmeticos/natds-web';

function Positions() {
  return (
    <>
      <Tag id="default" color="primary" position="default">
        Default Position
      </Tag>
      <Tag id="left" color="primary" position="left">
        Left Position
      </Tag>
    </>
  );
}
Available positions: default, left

​
Props

​
ITagProps

​
id
string
The HTML id attribute for the tag element.
​
children
React.ReactNode
The content to display inside the tag.
​
color
'primary' | 'secondary' | 'info' | 'error' | 'warning' | 'success' | 'light' | 'dark'
default:"primary"
The color variant of the tag.
​
size
'small' | 'standard'
default:"small"
The size of the tag.
​
position
'default' | 'left'
default:"default"
The positioning/alignment of the tag.
​
className
string
CSS class name for custom styling.
​
style
React.CSSProperties
Inline styles for the tag.
​
component
React.ElementType
default:"span"
The component used for the root node. Can be a string for HTML elements or a React component.

​
Common Use Cases

​
Status Indicators

import { Tag } from '@naturacosmeticos/natds-web';

function StatusTags() {
  return (
    <>
      <Tag id="active" color="success">Active</Tag>
      <Tag id="pending" color="warning">Pending</Tag>
      <Tag id="inactive" color="error">Inactive</Tag>
    </>
  );
}

​
Product Labels

import { Tag } from '@naturacosmeticos/natds-web';

function ProductCard() {
  return (
    <div style={{ position: 'relative', padding: 16, border: '1px solid #ccc' }}>
      <Tag id="new" color="primary" size="small">
        New
      </Tag>
      <h3>Product Name</h3>
      <p>Product description...</p>
    </div>
  );
}

​
Category Tags

import { Tag } from '@naturacosmeticos/natds-web';

function ArticleCategories() {
  const categories = ['Technology', 'Design', 'Business'];
  
  return (
    <div style={{ display: 'flex', gap: 8 }}>
      {categories.map((category, index) => (
        <Tag key={index} id={`category-${index}`} color="secondary" size="small">
          {category}
        </Tag>
      ))}
    </div>
  );
}

​
Notification Count

import { Tag } from '@naturacosmeticos/natds-web';

function NotificationBadge() {
  const count = 5;
  
  return (
    <div style={{ position: 'relative', display: 'inline-block' }}>
      <button>Messages</button>
      {count > 0 && (
        <Tag id="notification" color="error" size="small">
          {count}
        </Tag>
      )}
    </div>
  );
}

​
Migration Note

The ContextualBadge component is deprecated since version 1.1.0. Use Tag instead.
// Old
import { ContextualBadge } from '@naturacosmeticos/natds-web';
<ContextualBadge>Label</ContextualBadge>

// New
import { Tag } from '@naturacosmeticos/natds-web';
<Tag id="tag-id">Label</Tag>

​
Accessibility

When using tags for status information, ensure the meaning is not conveyed by color alone: 
import { Tag } from '@naturacosmeticos/natds-web';

function AccessibleTag() {
  return (
    <Tag id="status" color="success">
      <span role="img" aria-label="Success">✓</span>
      Active
    </Tag>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us