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';

Usage​

Default Tags​

A basic Tags container groups several Tag components in a single line. Use this for simple tag lists or keyword clouds.

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

Add-ons (Grouped)​

Set the hasAddons prop to group tags together as add-ons, removing spacing between them for a compact, connected look.

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

Multiline​

Use the isMultiline prop to allow tags to wrap onto multiple lines, making the tag group responsive for long lists.

<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>

Group Size​

Set the size prop ('medium', 'large') on Tags to size every tag in the group at once, instead of setting size on each Tag individually. Bulma has no .tags.are-small class, so 'small' is not a valid value here.

<>
  <Tags size="medium">
    <Tag color="primary">Medium</Tag>
    <Tag color="info">Medium</Tag>
  </Tags>
  <Tags size="large">
    <Tag color="primary">Large</Tag>
    <Tag color="info">Large</Tag>
  </Tags>
</>

With Margin​

You can use Bulma helper props like m="4" to add margin around the tag group for spacing within layouts.

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

Mixed Tags​

Combine props such as isMultiline, size, isRounded, and isDelete to create flexible, interactive tag groups for advanced UIs.

function example() {
  const [show, setShow] = useState();

  return (
    <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​

You can combine hasAddons with a delete tag to create a tightly grouped, dismissible tag set.

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

Compound (dot-notation) usage​

Tag is also available as Tags.Tag, so a tag group can be composed from the single Tags import.

<Tags>
  <Tags.Tag color="primary">React</Tags.Tag>
  <Tags.Tag color="info">TypeScript</Tags.Tag>
</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​

Props​

PropTypeDefaultDescription
classNamestring—Additional CSS classes to apply.
hasAddonsbooleanfalseGroup tags together as add-ons (no spacing).
isMultilinebooleanfalseAllow tags to wrap onto multiple lines.
size'medium' | 'large'—Size of every tag in the group.
childrenReact.ReactNode—Tag elements to render inside the container.
...All standard <div> attributes and Bulma helper props—See Helper Props

Subcomponents:

  • Tags.Tag: The Tag component renders a Bulma-styled label or badge.