SushiTag

A customizable tag component for the Sushi design system.

SushiTag is a small, compact component typically used to display categories, attributes, or status information. It supports various visual styles (rounded, capsule, outlined, dashed), sizes, and optional prefix/suffix icons.

Tags can be interactive (clickable) or static, and can contain custom content or use the standard text and icon layout.

Example

The SushiTag component is used to create compact, visual indicators for various attributes and categories.

// Basic tag
SushiTag(
    props = SushiTagProps(
        text = "Capsule",
        type = SushiTagType.Capsule,
        size = SushiTagSize.Medium
    )
)

// Tag with icon and custom colors
SushiTag(
    props = SushiTagProps(
        text = "Vegetarian",
        type = SushiTagType.RoundedOutline,
        size = SushiTagSize.Small,
        prefixIcon = SushiIconProps(
            code = SushiIconCodes.IconCheck,
            color = SushiTheme.colors.green.v600
        ),
        borderColor = SushiTheme.colors.green.v600,
        fontColor = SushiTheme.colors.green.v600
    )
)

Component API

SushiTag

Parameter	Description
text	The text content to display in the tag
size	The size variant of the tag (affects padding and text size)
type	The visual style of the tag (affects shape and border)
color	The background color of the tag
fontColor	The color of the text and icons in the tag
borderColor	The color of the border (for outline and dashed types)
suffixIcon	Optional icon to display after the text
prefixIcon	Optional icon to display before the text
iconSpacing	Custom spacing between icons and text
shape	Optional custom shape to override the default shape from the type
markdown	Whether to interpret the text content as markdown