OLYSENSE Design System

Use the size attribute to change a tab’s size.

Small

Medium

Large

<div class='flex items-center gap-8'>
  <ods-tag size="small">Small</ods-tag>
  <ods-tag size="medium">Medium</ods-tag>
  <ods-tag size="large">Large</ods-tag>
</div>

import { OdsTag } from '@ods/components/react.tag';

const Example = () => {
  return (
    <div className='flex items-center gap-8'>
      <OdsTag size="small">Small</OdsTag>
      <OdsTag size="medium">Medium</OdsTag>
      <OdsTag size="large">Large</OdsTag>
    </div>
  )
}

export default Example;

Use the removable attribute to add a remove button to the tag.

Small

Medium

Large

<div class="tags-removable flex items-center gap-8">
  <ods-tag size="small" removable>Small</ods-tag>
  <ods-tag size="medium" removable>Medium</ods-tag>
  <ods-tag size="large" removable>Large</ods-tag>
</div>

<script>
  const div = document.querySelector('.tags-removable');

  div.addEventListener('ods-remove', event => {
    const tag = event.target;
    tag.style.opacity = '0';
    setTimeout(() => (tag.style.opacity = '1'), 2000);
  });
</script>

<style>
  .tags-removable ods-tag {
    transition: 250ms opacity;
  }
</style>

import { OdsTag } from '@ods/components/react.tag';

const Example = () => {

  const handleRemove = (event: any) => {
    const tag = event.target;
    tag.style.opacity = '0';
    setTimeout(() => (tag.style.opacity = '1'), 2000);
  }

  return (
    <div className='tags-removable flex items-center gap-8 transition duration-200 transition-property'>
      <OdsTag size="small" removable onOdsRemove={handleRemove}>Small</OdsTag>
      <OdsTag size="medium" removable onOdsRemove={handleRemove}>Medium</OdsTag>
      <OdsTag size="large" removable onOdsRemove={handleRemove}>Large</OdsTag>
    </div>
  )
}

export default Example;

Use the prefix slot to add an icon before the tag label.

Small

Medium

Large

<div class="tags-removable flex items-center gap-8">
  <ods-tag size="small">
    <ods-icon name="check-circle-filled" class="text-sm" slot='prefix'></ods-icon>
    Small
  </ods-tag>
  <ods-tag size="medium">
    <ods-icon name="check-circle-filled" class="text-md" slot='prefix'></ods-icon>
    Medium
  </ods-tag>
  <ods-tag size="large">
    <ods-icon name="check-circle-filled" class="text-lg" slot='prefix'></ods-icon>
    Large
  </ods-tag>
</div>

import { OdsIcon } from '@ods/components/react.icon';
import { OdsTag } from '@ods/components/react.tag';

const Example = () => {
  return (
    <div className="tags-removable flex items-center gap-8">
      <OdsTag size="small">
        <OdsIcon name="check-circle-filled" className="text-sm" slot='prefix'></OdsIcon>
        Small
      </OdsTag>
      <OdsTag size="medium">
        <OdsIcon name="check-circle-filled" className="text-md" slot='prefix'></OdsIcon>
        Medium
      </OdsTag>
      <OdsTag size="large">
        <OdsIcon name="check-circle-filled" className="text-lg" slot='prefix'></OdsIcon>
        Large
      </OdsTag>
    </div>
  )
}

export default Example;

Use the variant attribute to change the tag’s status indication.

Info

Success

Warning

Danger

Info

Success

Warning

Danger

Info

Success

Warning

Danger

<div ods-layout="inline gap:8">
  <ods-tag size="small" variant='primary'>
    <ods-icon name="info-circle-filled" slot='prefix'></ods-icon>
    Info
  </ods-tag>
  <ods-tag size="small"variant='success'>
    <ods-icon name="check-circle-filled" slot='prefix'></ods-icon>
    Success
  </ods-tag>
  <ods-tag size="small" variant='warning'>
    <ods-icon name="warning-filled" slot='prefix'></ods-icon>
    Warning
  </ods-tag>
  <ods-tag size="small" variant='danger'>
    <ods-icon name="exclamation-circle-filled" slot='prefix'></ods-icon>
    Danger
  </ods-tag>
</div>

<br />

<div ods-layout="inline gap:16">
  <ods-tag size="medium" variant='primary'>
    <ods-icon name="info-circle-filled" slot='prefix'></ods-icon>
    Info
  </ods-tag>
  <ods-tag size="medium" variant='success'>
    <ods-icon name="check-circle-filled" slot='prefix'></ods-icon>
    Success
  </ods-tag>
  <ods-tag size="medium" variant='warning'>
    <ods-icon name="warning-filled" slot='prefix'></ods-icon>
    Warning
  </ods-tag>
  <ods-tag size="medium" variant='danger'>
    <ods-icon name="exclamation-circle-filled" slot='prefix'></ods-icon>
    Danger
  </ods-tag>
</div>

<br />

<div ods-layout="inline gap:16">
  <ods-tag size="large" variant='primary'>
    <ods-icon name="info-circle-filled" class="text-lg"slot='prefix'></ods-icon>
    Info
  </ods-tag>
  <ods-tag size="large" variant='success'>
    <ods-icon name="check-circle-filled" class="text-lg" slot='prefix'></ods-icon>
    Success
  </ods-tag>
  <ods-tag size="large" variant='warning'>
    <ods-icon name="warning-filled" class="text-lg" slot='prefix'></ods-icon>
    Warning
  </ods-tag>
  <ods-tag size="large" variant='danger'>
    <ods-icon name="exclamation-circle-filled" class="text-lg" slot='prefix'></ods-icon>
    Danger
  </ods-tag>
</div>

import { OdsIcon } from '@ods/components/react.icon';
import { OdsTag } from '@ods/components/react.tag';

const Example = () => {
  return (
    <>
      <div ods-layout="inline gap:8">
        <OdsTag size="small" variant='primary'>
          <OdsIcon name="info-circle-filled" slot='prefix'></OdsIcon>
          Info
        </OdsTag>
        <OdsTag size="small"variant='success'>
          <OdsIcon name="check-circle-filled" slot='prefix'></OdsIcon>
          Success
        </OdsTag>
        <OdsTag size="small" variant='warning'>
          <OdsIcon name="warning-filled" slot='prefix'></OdsIcon>
          Warning
        </OdsTag>
        <OdsTag size="small" variant='danger'>
          <OdsIcon name="exclamation-circle-filled" slot='prefix'></OdsIcon>
          Danger
        </OdsTag>
      </div>

      <br />

      <div ods-layout="inline gap:16">
        <OdsTag size="medium" variant='primary'>
          <OdsIcon name="info-circle-filled" slot='prefix'></OdsIcon>
          Info
        </OdsTag>
        <OdsTag size="medium" variant='success'>
          <OdsIcon name="check-circle-filled" slot='prefix'></OdsIcon>
          Success
        </OdsTag>
        <OdsTag size="medium" variant='warning'>
          <OdsIcon name="warning-filled" slot='prefix'></OdsIcon>
          Warning
        </OdsTag>
        <OdsTag size="medium" variant='danger'>
          <OdsIcon name="check-circle-filled" slot='prefix'></OdsIcon>
          Danger
        </OdsTag>
      </div>

      <br />

      <div ods-layout="inline gap:16">
        <OdsTag size="large" variant='primary'>
          <OdsIcon name="info-circle-filled" className="text-lg"slot='prefix'></OdsIcon>
          Info
        </OdsTag>
        <OdsTag size="large" variant='success'>
          <OdsIcon name="check-circle-filled" className="text-lg" slot='prefix'></OdsIcon>
          Success
        </OdsTag>
        <OdsTag size="large" variant='warning'>
          <OdsIcon name="warning-filled" className="text-lg" slot='prefix'></OdsIcon>
          Warning
        </OdsTag>
        <OdsTag size="large" variant='danger'>
          <OdsIcon name="exclamation-circle-filled" className="text-lg" slot='prefix'></OdsIcon>
          Danger
        </OdsTag>
      </div>
    </>
  )
}

export default Example;

Use the base and prefix parts to apply custom colors to the background, border and icon associated with the tag.

Custom

<div ods-layout="inline gap:16">
  <ods-tag id="custom-color" size="large">
    <ods-icon name="wrench-filled" class="text-lg" slot='prefix'></ods-icon>
    Custom
  </ods-tag>
</div>

<style>
  #custom-color::part(base) {
    background-color: var(--sense-color-data-purple-200);
    border-color: var(--sense-color-data-purple-500);
  }

  #custom-color::part(prefix) {
    color: var(--sense-color-data-purple-500);
  }
</style>

import { OdsIcon } from '@ods/components/react.icon';
import { OdsTag } from '@ods/components/react.tag';

const css = `
  #custom-color::part(base) {
    background-color: var(--sense-color-data-purple-200);
    border-color: var(--sense-color-data-purple-500);
  }

  #custom-color::part(prefix) {
    color: var(--sense-color-data-purple-500);
  }
`;

const Example = () => {
  return (
    <>
      <div ods-layout="inline gap:16">
        <OdsTag id="custom-color" size="large">
          <OdsIcon name="wrench-filled" className="text-lg" slot='prefix'></OdsIcon>
          Custom
        </OdsTag>
      </div>

      <style>{css}</style>
    </>
  )
}

export default Example;

Importing

import '@ods/components/web.tag';

Note: You only need to import a web component once in your code, as it registers itself globally when defined, allowing you to use it anywhere within your application without needing to re-import it each time you want to use the component.

Slots

Name	Description
(default)	The tag's content.

Properties

Please note, both DOM properties and HTML attributes are shown in the table below. Unless otherwise specified, the property and attribute names are identical.

Property/Attribute	Type	Default
variant	'primary' \| 'success' \| 'neutral' \| 'warning' \| 'danger'	'neutral'
size	'small' \| 'medium' \| 'large'	'medium'
removable	boolean	false

Events

React Event	Description	Event Detail
ods-remove	Emitted when the remove button is activated.	--

Parts

Name	Description
base	The component's base wrapper.
content	The tag's content.
remove-button	The tag's remove button, an `<ods-icon-button>`.
remove-button__base	The remove button's exported `base` part.
prefix	The tag's prefix slot.

Dependencies

This component automatically imports the following dependencies.

ods-icon
ods-icon-button

Tag

Examples

Sizes

Removable

Prefix

Status

Customization

Importing

Slots

Properties

Events

Parts

Dependencies