Tag

Tags show concise metadata in a compact format.


React Component

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

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 SagePanelBlock, {} do %>
	<h3 class="t-sage-heading-6">Default</h3>
	<%= sage_component SageTag, {
		value: "Label",
		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

show_dismiss

Determines whether the close button renders or not.

Boolean

nil

value

required

Provides a label for the tag.

String

nil

Do
Don't