Skip to main content

Tag

Overview​

The Tag component renders a Bulma-styled label or badge. It supports color, size, rounded, hoverable, and delete (close) variants. Use it for status indicators, categorization, dismissible tokens, or compact UI elements.

info

Tags are perfect for highlighting statuses, categories, or adding removable tokens to your UI.

Import​

import { Tag } from '@allxsmith/bestax-bulma';

Props​

PropTypeDefaultDescription
classNamestring—Additional CSS classes.
color'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'black' | 'dark' | 'light' | 'white'—Bulma color modifier for the tag.
size'normal' | 'medium' | 'large'—Tag size.
isRoundedboolean—Renders a rounded tag.
isDeleteboolean—Renders a delete-style tag (delete button).
isHoverableboolean—Adds hover effect to the tag.
onDelete() => void—Callback for delete tag/button.
childrenReact.ReactNode—Tag content.
...All standard <span> and Bulma helper props(See Helper Props)

Usage​

Default Tag​

<Tag>Default Tag</Tag>

Colored Tag​

<Tag color="primary">Primary Tag</Tag>

Medium and Large Tag​

<Tag size="medium">Medium Tag</Tag>
<Tag size="large">Large Tag</Tag>

Rounded Tag​

<Tag isRounded>Rounded Tag</Tag>

Delete Tag (Button)​

<Tag isDelete onDelete={() => alert('Deleted!')} />

With Margin​

<Tag m="4">Tag with Margin</Tag>

Combined Styles​

<Tag color="success" size="medium" isRounded m="2">
  Combined Tag
</Tag>

All Colors​

<>
  {[
    'primary',
    'link',
    'info',
    'success',
    'warning',
    'danger',
    'black',
    'dark',
    'light',
    'white',
  ].map(color => (
    <Tag key={color} color={color} isHoverable>
      {color.charAt(0).toUpperCase() + color.slice(1)}
    </Tag>
  ))}
</>

Sizes Together​

<>
  {['primary', 'success', 'danger'].map(color => (
    <div key={color} style={{ display: 'flex', gap: '10px' }}>
      <Tag color={color} size="normal" isHoverable>
        {color.charAt(0).toUpperCase() + color.slice(1)} Normal
      </Tag>
      <Tag color={color} size="medium" isHoverable>
        {color.charAt(0).toUpperCase() + color.slice(1)} Medium
      </Tag>
      <Tag color={color} size="large" isHoverable>
        {color.charAt(0).toUpperCase() + color.slice(1)} Large
      </Tag>
    </div>
  ))}
</>

Hoverable Tag​

<Tag color="primary" isHoverable>
  Hoverable Tag
</Tag>

Tag with Delete Component​

import { Tags, Delete } from '@allxsmith/bestax-bulma';

<Tags hasAddons>
  <Tag color="primary" size="medium">
    Tag with Delete
    <Delete onClick={() => alert('Tag deleted!')} />
  </Tag>
</Tags>;

Accessibility​

  • Delete buttons: Use aria-label for delete tags for screen readers.
  • Keyboard: Delete tags are rendered as <button>, supporting keyboard activation.
  • Semantics: Use tags for supplemental information, not as primary headings.
tip

Combine Tag with Tags for grouped, multi-tag UIs.

  • Tags: For grouping tags.
  • Delete: For standalone delete buttons.
  • Helper Props: Bulma helper props for spacing, color, etc.

Additional Resources​