Tag

Tags show concise metadata in a compact format.

Note: The Tag component is meant to be interactive. If you are looking for a non-interactive Tag-like component, consider the Badge component.

Default

Label

Image Variant

Label

Sage Component

SageTag

<%= md("**Note:** The Tag component is meant to be interactive. If you are looking for a non-interactive Tag-like component, consider the #{link_to("Badge", pages_component_path("badge"))} component.") %>
<%= sage_component SagePanelStack, {} do %>
	<h3 class="t-sage-heading-6">Default</h3>
	<%= sage_component SageTag, {
		value: "Label",
		show_dismiss: true,
		dismiss_attributes: {
			"data-js-copy-button": "Label"
		}
	} %>

	<h3 class="t-sage-heading-6">Image Variant</h3>
	<%= sage_component SageTag, {
		value: "Label",
		image: "avatar/koray_okumus.png",
		show_dismiss: true,
		dismiss_attributes: {
			"data-js-copy-button": "Label"
		}
	} %>
<% end %>

Property	Description	Type	Default
`dismiss_attributes`	Provides button attributes to wire up functionality to the close button.	Hash	`nil`
`image`	Adds a presentational image to the left of the label.	String	`nil`
`show_dismiss`	Determines whether the close button renders or not.	Boolean	`nil`
`value` required	Provides a label for the tag.	String	`nil`

Don't