Caution: The Jack Henry design system is currently in an alpha state. Designs, code, and documentation may change at any time without warning. The system is presented for testing purposes only.

Tag

Tags represent keywords, categories, or other labels that serve to classify adjacent content.

Status: Planned

Anatomy

  1. Container
  2. Left icon
  3. Remove icon
  4. Label

Variants

Type

Text only (Default)

Use the text-only variant to clearly and succinctly represent a concept within the tag. Text-only variants work well when space is limited or when the tag’s concept is difficult to represent with iconography.

Left icon

A left icon can be included to add visual emphasis to tags with concepts that are relatively easy to represent with iconography. A tooltip is not required since the label is still present. The left icon can be customized by the user to coordinate with the tag label.

Remove icon

The remove icon can be included when the tag requires the option to be removed from a given context.

Both icons

Use both icons when tags with left icons also require the option to be removed from a given context.

Appearance

Primary

Primary tags can be used to provide additional emphasis to a particular tag.

Secondary (Default)

Secondary tags are the default appearance and should be used for most situations where no other semantic meaning is required.

Inverted

Use the inverted tag in place of the primary variant when placed on dark surface colors.

Neutral

Neutral tags should be used in contexts that are largely informative and have no positive or negative connotation.

Positive

Positive tags should be used in contexts that convey a positive connotation such as approved, complete, and deposited.

Negative

Negative tags should be used in contexts that convey a negative connotation such as error, alert, or rejected.

Custom

Custom tags can be used to create appearances beyond the standard presets.

Size

Small

Small tags should be used when vertical space is limited. Due to its limited height, small tags cannot display a left or right icon.

Medium (Defualt)

Medium tags are the default size and can be used in a variety of layouts and contexts.

Large

Large tags are best used in limited contexts where additional visual emphasis is required.

Group

Tags may be grouped together to convey a related taxonomy or set of filters and may can contain a mix of certain variants such as icon, dismissable, and appearance. However, avoid mixing differently sized tags within the same group.

Tags wrap to the next line if they extend beyond the container.

Alignment

Tags within a group can be aligned to either the start or the end of the container.

Start (Default)

Tags are aligned to the left edge of the tag group container.

End

Tags are aligned to the right edge of the tag group container.