Tag

RC 0.8Kb

import 'pyro/tag'

Preview Code Stackblitz

gg go no

Usage

<pyro-tag severity="success" pill>gg</pyro-tag>

Variations

Props

interface TagProps {
  /** Label/text, overriden by default slot */
  label?: string;
  /** Tag severity severity, determines colors */
  severity?: Severity;
  /** Size of tag */
  size?: 's' | 'm' | 'l';
  /** Adds an cross icon to dismiss the tag */
  dismissible?: boolean;
  /** Rounds the tag to a pill */
  pill?: boolean;
  /** Slot for label */
  children?: any;
}

Slots

/**
 * @slot - Label, overrides the label prop
 */

CSS prop theming

The

Full theming sheet

/**
 * @prop {--pyro-tag-text-color = --pyro-text-color} - `color`
 * @prop {--pyro-tag-surface-color = --pyro-surface-color} - `background` (when no `severity` is set)
 * @prop {--pyro-tag-border = --pyro-border} - `border`
 * @prop {--pyro-tag-border-radius = --pyro-border-radius} - `border-radius`
 * @prop {--pyro-tag-spacing = --pyro-spacing} - `padding`
 * @prop {--pyro-tag-min-width = 60px} - `min-width`
 *
 * @prop {--pyro-tag-info-color-lighter = --pyro-info-color-lighter} - `background`
 * @prop {--pyro-tag-success-color-lighter = --pyro-success-color-lighter} - `background`
 * @prop {--pyro-tag-warning-color-lighter = --pyro-warning-color-lighter} - `background`
 * @prop {--pyro-tag-error-color-lighter = --pyro-error-color-lighter} - `background`
 * @prop {--pyro-tag-info-color = --pyro-info-color} - `border-color`
 * @prop {--pyro-tag-success-color = --pyro-success-color} - `border-color`
 * @prop {--pyro-tag-warning-color = --pyro-warning-color} - `border-color`
 * @prop {--pyro-tag-error-color = --pyro-error-color} - `border-color`
 */