Tag
Tags are used as labels to organize things or to indicate a selection.
Tag(_.variant.brand)("Brand")Tag(_.variant.success)("Success")Tag(_.variant.neutral)("Neutral")Tag(_.variant.warning)("Warning")Tag(_.variant.danger)("Danger")Examples
Appearance
Use the size attribute to change a tag's visual appearance.
The default appearance is filled-outlined.
Tag(_.variant.brand, _.appearance.accent)("Accent")Tag(_.variant.brand, _.appearance.filledOutlined)("Filled + Outlined")Tag(_.variant.brand, _.appearance.filled)("Filled")Tag(_.variant.brand, _.appearance.outlined)("Outlined")Tag(_.variant.success, _.appearance.accent)("Accent")Tag(_.variant.success, _.appearance.filledOutlined)("Filled + Outlined")Tag(_.variant.success, _.appearance.filled)("Filled")Tag(_.variant.success, _.appearance.outlined)("Outlined")Tag(_.variant.neutral, _.appearance.accent)("Accent")Tag(_.variant.neutral, _.appearance.filledOutlined)("Filled + Outlined")Tag(_.variant.neutral, _.appearance.filled)("Filled")Tag(_.variant.neutral, _.appearance.outlined)("Outlined")Tag(_.variant.warning, _.appearance.accent)("Accent")Tag(_.variant.warning, _.appearance.filledOutlined)("Filled + Outlined")Tag(_.variant.warning, _.appearance.filled)("Filled")Tag(_.variant.warning, _.appearance.outlined)("Outlined")Tag(_.variant.danger, _.appearance.accent)("Accent")Tag(_.variant.danger, _.appearance.filledOutlined)("Filled + Outlined")Tag(_.variant.danger, _.appearance.filled)("Filled")Tag(_.variant.danger, _.appearance.outlined)("Outlined")Sizes
Use the size attribute to change a tag's size.
Tag(_.size.small)("Small")Tag(_.size.medium)("Medium")Tag(_.size.large)("Large")Pill
Use the pill attribute to give tabs rounded edges.
Tag(_.size.small, _.pill := true)("Small")Tag(_.size.medium, _.pill := true)("Medium")Tag(_.size.large, _.pill := true)("Large")Removable
Use the with-remove attribute to add a remove button to the tag.
Tag(_.size.small, _.withRemove := true)("Small")Tag(_.size.medium, _.withRemove := true)("Medium")Tag(_.size.large, _.withRemove := true)("Large")