tag

// src/components/patterns/tags/tag/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /patterns/tags/tag
additionalProperties: false
type: object
required:
  - label
properties:
  label:
    type: string
  url:
    type: string
    format: uri-reference
  button:
    type: boolean

// src/components/patterns/tags/tag/mocks.yaml

label: Tag
$variants:
  - $name: With link
    url: url
    label: Tag with link
  - $name: With remove button
    label: Tag with remove button
    button: true

// src/components/patterns/tags/tag/tag.twig

{% if url %}
	<a class="Tag u-typo-TextS Tag--link u-link" href="{{ url }}">{{ label }}</a>
{% else %}
	<span class="Tag js-Tag u-typo-TextS">
		<span class="Tag-label js-Tag-label">{{ label }}</span>
		{%- if button %}
			<button class="Tag-button js-Tag-button" type="button">
				<span class="u-hiddenVisually">{{ "tag.remove_button_text"|tc }}</span>
				{% include "@elements/icon/icon.twig" with {
					classes: ["Tag-icon"],
					name: "close",
				} only %}
			</button>
		{% endif -%}
	</span>
{% endif %}