AxTag provides inline status labels with five semantic tones, optional dot indicators, icons, and multiple visual variants. Use tags to communicate state, categories, or attributes.
Basic Usage
import { AxTag } from 'axmed-design-system'
function Example() {
return <AxTag tone="success">Delivered</AxTag>
}
<AxTag tone="success">Completed</AxTag> {/* Green - completed, delivered, in stock */}
<AxTag tone="info">Processing</AxTag> {/* Blue - in progress, in transit */}
<AxTag tone="warning">Low Stock</AxTag> {/* Orange - warnings, low stock */}
<AxTag tone="error">Cancelled</AxTag> {/* Red - errors, out of stock */}
<AxTag tone="neutral">Pending</AxTag> {/* Gray - pending, draft, expired */}
With Icons
Replace the dot with a custom icon:
import { CheckCircleOutlined, CarOutlined, SyncOutlined, ClockCircleOutlined } from '@ant-design/icons'
<AxTag tone="success" icon={<CheckCircleOutlined />}>Delivered</AxTag>
<AxTag tone="info" icon={<CarOutlined />}>In Transit</AxTag>
<AxTag tone="info" icon={<SyncOutlined spin />}>Processing</AxTag>
<AxTag tone="neutral" icon={<ClockCircleOutlined />}>Pending</AxTag>
Without Dot
Remove the dot indicator:
<AxTag tone="success" dot={false}>Completed</AxTag>
Pill Shape
Rounded pill-shaped tags:
<AxTag tone="success" pill>Delivered</AxTag>
<AxTag tone="info" pill>In Transit</AxTag>
<AxTag tone="error" pill>Cancelled</AxTag>
Variants
Outlined (Default)
<AxTag tone="success" variant="outlined">In Stock</AxTag>
<AxTag tone="success" variant="filled" dot={false}>Completed</AxTag>
Solid Fill
Custom background color with white text:
<AxTag fill="var(--green-600)">Completed</AxTag>
<AxTag fill="var(--cyan-600)">In Progress</AxTag>
<AxTag fill="var(--red-600)">Cancelled</AxTag>
<AxTag fill="var(--primary-600)">Axmed Purple</AxTag>
Small Size
Compact badge style (11px font):
<AxTag small color="orange">Be first to bid!</AxTag>
<AxTag small tone="info">5 active</AxTag>
<AxTag small tone="neutral">+3</AxTag>
<AxTag small pill fill="var(--green-600)">New</AxTag>
Closeable
Add a close button:
<AxTag closable onClose={() => console.log('Closed')}>Kenya</AxTag>
<AxTag closable onClose={() => console.log('Closed')}>Nigeria</AxTag>
Common Patterns
Order Status
const statusConfig = {
Delivered: { tone: 'success', icon: <CheckCircleOutlined /> },
'In Transit': { tone: 'info', icon: <CarOutlined /> },
Processing: { tone: 'info', icon: <SyncOutlined spin /> },
Pending: { tone: 'neutral', icon: <ClockCircleOutlined /> },
Cancelled: { tone: 'error', icon: <CloseCircleOutlined /> },
}
function OrderStatus({ status }) {
const config = statusConfig[status]
return (
<AxTag tone={config.tone} icon={config.icon} pill>
{status}
</AxTag>
)
}
Stock Status
const stockToneMap = {
'In Stock': 'success',
'Low Stock': 'warning',
'Out of Stock': 'error',
'Expired': 'neutral',
}
<AxTag tone={stockToneMap[status]}>{status}</AxTag>
Category Tags
Use solid fill colors for category labels:
const categoryColors = {
Antibiotics: 'var(--cyan-700)',
Antidiabetics: 'var(--primary-500)',
Analgesics: 'var(--orange-600)',
Antimalarials: 'var(--cyan-500)',
}
function CategoryTag({ category }) {
return <AxTag fill={categoryColors[category]}>{category}</AxTag>
}
In Table Cells
import { AxTable, AxTag } from 'axmed-design-system'
const columns = [
{
title: 'Status',
dataIndex: 'status',
key: 'status',
render: (status) => (
<AxTag tone={statusToneMap[status]}>{status}</AxTag>
),
},
]
import { AxCard, AxTag } from 'axmed-design-system'
<AxCard
title="PharmaCorp Ltd"
extra={<AxTag tone="success">Awarded</AxTag>}
>
Card content...
</AxCard>
Badge-Style Indicators
<AxTag small pill fill="var(--primary)">Featured</AxTag>
<AxTag small color="orange">Be first to bid!</AxTag>
<AxTag small tone="warning" pill>Closing soon</AxTag>
Semantic tone: success, info, warning, error, or neutral. Automatically enables dot indicator.
Show colored dot indicator (auto-enabled when tone is set, unless icon is provided)
Custom icon to display (replaces dot)
Pill-shaped tag with rounded corners (border-radius: 16px)
Solid background color with white text and no border. Pass hex value or CSS variable.
Small badge variant (11px font, compact padding)
Ant Design variant: outlined (default), filled, or borderless
Close button click handler