Tag

Tag

<div id="tags"></div>

:global(.limited-width) {
  width: 140px
}

import {render} from 'react-dom';
import React from 'react';
import {CheckmarkIcon} from '@jetbrains/ring-ui/components/icon';

import Tag from '@jetbrains/ring-ui/components/tag/tag';
import hubConfig from '@ring-ui/docs/components/hub-config';

const url = `${hubConfig.serverUri}/api/rest/avatar/default?username=Jet%20Brains`
const renderBadgeDemo = () => (
  <div>
    <Tag>Simple</Tag>
    <Tag readOnly>Read-only</Tag>
    <Tag angled>With angle</Tag>
    <Tag angled className="limited-width">With angle and long truncated text</Tag>
    <Tag className="limited-width">With long truncated text</Tag>
    <Tag rgTagIcon={CheckmarkIcon} rgTagTitle="I am an icon title">With icon title</Tag>
    <Tag avatar={url} readOnly={false}>With avatar</Tag>
  </div>
);

render(renderBadgeDemo(), document.getElementById('tags'));