1.13.0 Dark Light System

Tag

<lynk-tag> | LynkTag
stable Since 1.0

Tags are used as labels to organize things or to indicate a selection.

Default Primary Accent Success Neutral Warning Danger Info 
<lynk-tag>Default</lynk-tag>
<lynk-tag type="primary">Primary</lynk-tag>
<lynk-tag type="accent">Accent</lynk-tag>
<lynk-tag type="success">Success</lynk-tag>
<lynk-tag type="neutral">Neutral</lynk-tag>
<lynk-tag type="warning">Warning</lynk-tag>
<lynk-tag type="danger">Danger</lynk-tag>
<lynk-tag type="info">Info</lynk-tag>

Examples

Appearance

Use the appearance attribute to change a tag’s visual appearance. The default appearance is outlined filled.

Default Loud Default
Loud Filled + Outlined Filled Outlined
Loud Filled + Outlined Filled Outlined
Loud Filled + Outlined Filled Outlined
Loud Filled + Outlined Filled Outlined
Loud Filled + Outlined Filled Outlined
Loud Filled + Outlined Filled Outlined
Loud Filled + Outlined Filled Outlined 
<lynk-stack>
  <div>
    <lynk-tag appearance="loud">Default Loud</lynk-tag>
    <lynk-tag>Default</lynk-tag>
  </div>

  <div>
    <lynk-tag color="primary" appearance="loud">Loud</lynk-tag>
    <lynk-tag color="primary" appearance="filled outlined">Filled + Outlined</lynk-tag>
    <lynk-tag color="primary" appearance="filled">Filled</lynk-tag>
    <lynk-tag color="primary" appearance="outlined">Outlined</lynk-tag>
  </div>

  <div>
    <lynk-tag color="accent" appearance="loud">Loud</lynk-tag>
    <lynk-tag color="accent" appearance="filled outlined">Filled + Outlined</lynk-tag>
    <lynk-tag color="accent" appearance="filled">Filled</lynk-tag>
    <lynk-tag color="accent" appearance="outlined">Outlined</lynk-tag>
  </div>

  <div>
    <lynk-tag color="success" appearance="loud">Loud</lynk-tag>
    <lynk-tag color="success" appearance="filled outlined">Filled + Outlined</lynk-tag>
    <lynk-tag color="success" appearance="filled">Filled</lynk-tag>
    <lynk-tag color="success" appearance="outlined">Outlined</lynk-tag>
  </div>

  <div>
    <lynk-tag color="neutral" appearance="loud">Loud</lynk-tag>
    <lynk-tag color="neutral" appearance="filled outlined">Filled + Outlined</lynk-tag>
    <lynk-tag color="neutral" appearance="filled">Filled</lynk-tag>
    <lynk-tag color="neutral" appearance="outlined">Outlined</lynk-tag>
  </div>

  <div>
    <lynk-tag color="warning" appearance="loud">Loud</lynk-tag>
    <lynk-tag color="warning" appearance="filled outlined">Filled + Outlined</lynk-tag>
    <lynk-tag color="warning" appearance="filled">Filled</lynk-tag>
    <lynk-tag color="warning" appearance="outlined">Outlined</lynk-tag>
  </div>

  <div>
    <lynk-tag color="danger" appearance="loud">Loud</lynk-tag>
    <lynk-tag color="danger" appearance="filled outlined">Filled + Outlined</lynk-tag>
    <lynk-tag color="danger" appearance="filled">Filled</lynk-tag>
    <lynk-tag color="danger" appearance="outlined">Outlined</lynk-tag>
  </div>

  <div>
    <lynk-tag color="info" appearance="loud">Loud</lynk-tag>
    <lynk-tag color="info" appearance="filled outlined">Filled + Outlined</lynk-tag>
    <lynk-tag color="info" appearance="filled">Filled</lynk-tag>
    <lynk-tag color="info" appearance="outlined">Outlined</lynk-tag>
  </div>
</lynk-stack>

Sizes

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

Tiny Small Medium Large 
<lynk-tag size="tiny">Tiny</lynk-tag>
<lynk-tag size="small">Small</lynk-tag>
<lynk-tag size="medium">Medium</lynk-tag>
<lynk-tag size="large">Large</lynk-tag>

Pill

Use the pill attribute to give tabs rounded edges.

Tiny Small Medium Large 
<lynk-tag size="tiny" pill>Tiny</lynk-tag>
<lynk-tag size="small" pill>Small</lynk-tag>
<lynk-tag size="medium" pill>Medium</lynk-tag>
<lynk-tag size="large" pill>Large</lynk-tag>

Prefix Icons

Use the prefixslot to add icons.

Tiny Small Medium Large 
<lynk-tag size="tiny" pill><lynk-icon slot="prefix" name="gear"></lynk-icon> Tiny</lynk-tag>
<lynk-tag size="small" pill><lynk-icon slot="prefix" name="gear"></lynk-icon> Small</lynk-tag>
<lynk-tag size="medium" pill><lynk-icon slot="prefix" name="gear"></lynk-icon> Medium</lynk-tag>
<lynk-tag size="large" pill><lynk-icon slot="prefix" name="gear"></lynk-icon> Large</lynk-tag>

Removable

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

Tiny Small Medium Large 
<div class="tags-removable">
  <lynk-tag size="tiny" removable>Tiny</lynk-tag>
  <lynk-tag size="small" removable>Small</lynk-tag>
  <lynk-tag size="medium" removable>Medium</lynk-tag>
  <lynk-tag size="large" removable>Large</lynk-tag>
</div>

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

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

<style>
  .tags-removable l-tag {
    transition: var(--lynk-transition-medium) opacity;
  }
</style>

Pulsating Tags

Use the pulse attribute to draw attention to the tag with a subtle animation.

1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 
<lynk-stack>
  <lynk-stack horizontal>
    <lynk-tag color="primary" size="small" pill pulse>1</lynk-tag>
    <lynk-tag color="accent" size="small" pill pulse>1</lynk-tag>
    <lynk-tag color="success" size="small" pill pulse>1</lynk-tag>
    <lynk-tag color="neutral" size="small" pill pulse>1</lynk-tag>
    <lynk-tag color="warning" size="small" pill pulse>1</lynk-tag>
    <lynk-tag color="danger" size="small" pill pulse>1</lynk-tag>
    <lynk-tag color="info" size="small" pill pulse>1</lynk-tag>
    <lynk-tag size="small" pill pulse>1</lynk-tag>
  </lynk-stack>
  <lynk-stack horizontal>
    <lynk-tag color="primary" size="small" appearance="loud" pill pulse>1</lynk-tag>
    <lynk-tag color="accent" size="small" appearance="loud" pill pulse>1</lynk-tag>
    <lynk-tag color="success" size="small" appearance="loud" pill pulse>1</lynk-tag>
    <lynk-tag color="neutral" size="small" appearance="loud" pill pulse>1</lynk-tag>
    <lynk-tag color="warning" size="small" appearance="loud" pill pulse>1</lynk-tag>
    <lynk-tag color="danger" size="small" appearance="loud" pill pulse>1</lynk-tag>
    <lynk-tag color="info" size="small" appearance="loud" pill pulse>1</lynk-tag>
    <lynk-tag size="small" appearance="loud" pill pulse>1</lynk-tag>
  </lynk-stack>
<lynk-stack>

Customize the pulse speed by defining a custom --pulse-speed css variable.

Slow Default Fast 
<lynk-stack horizontal>
  <lynk-tag type="success" size="small" badge pill pulse style="--pulse-speed: 3s">Slow</lynk-tag>
  <lynk-tag type="warning" size="small" badge pill pulse>Default</lynk-tag>
  <lynk-tag type="danger" size="small" badge pill pulse style="--pulse-speed: 750ms">Fast</lynk-tag>
</lynk-stack>

Custom Color Badges

Use the --background-color, --border-color and --color css properties to customize the tag colors.

Deep Pink 
<lynk-tag
  pill
  pulse
  removable
  size="small"
  style="--background-color: deeppink; --color: black; --border-color: lightpink;"
  >Deep Pink</lynk-tag
>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Bundler

To import this component using a bundler: 

import '@uplynk/lynk-design/dist/components/tag/tag.js';

Slots

Name Description
(default) The tag’s content.
prefix Used to prepend an icon or similar element to the tag.

Learn more about using slots.

Properties

Name Description Reflects Type Default
color The tag’s color. 'default' | 'primary' | 'accent' | 'success' | 'neutral' | 'warning' | 'danger' | 'info' 'default'
type The tag’s variant (backwards compatible alias for color). - -
appearance The tag’s visual appearance. 'loud' | 'filled' | 'outlined' | 'outlined filled' 'outlined filled'
size The tag’s size. 'tiny' | 'small' | 'medium' | 'large' 'medium'
pill Draws a pill-style tag with rounded edges. boolean false
removable Makes the tag removable. boolean false
pulse Makes the tag pulsate to draw attention. boolean false
badge Draws a solid filled badge-styled tag (deprecated - use appearance=“loud” instead). - -
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
ev-remove EvRemove Emitted when the remove button is activated. -

Learn more about events.

Parts

Name Description
base The component’s internal wrapper.
content The tag content.
remove-button The remove button.
remove-button__base The remove button’s base part.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <lynk-icon>
  • <lynk-icon-button>