Skip to main content

Tags

Overview​

The Tags component groups multiple Tag components together in a horizontal (or multiline) Bulma-styled container. Use it for tag clouds, keyword lists, multi-select UIs, or displaying collections of dismissible tokens.

info

Use Tags to organize tags with add-on and multiline layouts for a clean, compact UI.

Import​

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

Props​

PropTypeDefaultDescription
classNamestring—Additional CSS classes.
hasAddonsboolean—Group tags together as add-ons (no spacing).
isMultilineboolean—Allow tags to wrap onto multiple lines.
childrenReactNode—Tag elements to render inside the container.
...All standard <div> and Bulma helper props(See Helper Props)

Usage​

Default Tags​

<Tags>
  <Tag color="primary">Primary</Tag>
  <Tag color="info">Info</Tag>
  <Tag color="success">Success</Tag>
</Tags>

Add-ons (Grouped)​

<Tags hasAddons>
  <Tag color="primary">Package</Tag>
  <Tag color="success">Ready</Tag>
  <Tag isDelete onDelete={() => alert('Deleted!')} />
</Tags>

Multiline​

<Tags isMultiline>
  <Tag color="primary">Bulma</Tag>
  <Tag color="success">React</Tag>
  <Tag color="warning">Typescript</Tag>
  <Tag color="danger">Library</Tag>
  <Tag color="link">UI</Tag>
</Tags>

With Margin​

<Tags m="4">
  <Tag color="primary">With Margin</Tag>
</Tags>

Mixed Tags​

<Tags isMultiline>
  <Tag color="primary" size="medium">
    Primary Medium
  </Tag>
  <Tag color="success" isRounded>
    Success Rounded
  </Tag>
  {/* Dismissible tag */}
  {show && <Tag color="danger" isDelete onDelete={() => setShow(false)} />}
  <Tag color="info">Info</Tag>
</Tags>

Add-ons with Delete Tag​

<Tags hasAddons>
  <Tag color="danger">Allxsmith</Tag>
  <Tag isDelete onDelete={() => alert('Deleted!')} />
</Tags>

Accessibility​

  • Grouping: The container is a <div class="tags">, which is semantically neutral.
  • Delete buttons: If using delete tags, ensure each has an accessible label.
  • Multiline: isMultiline ensures tags wrap for better readability on small screens.
tip

Use hasAddons for tightly grouped tags (no space between them).

  • Tag: For individual tag elements.
  • Delete: For standalone delete buttons.
  • Helper Props: Bulma helper props for spacing, color, etc.

Additional Resources​