
Lozenge
Design a lozenge component: a compact, rounded label that can act as a tag, status chip, or small action button. The shape should feel distinct at a glance, with tight horizontal padding, soft corners, and enough visual weight to hold short text or a small icon.
Build the core component in a few clear variants: text only, icon plus text, and removable with a close affordance. Show default, hover, pressed, and disabled states so the interaction model is obvious. Keep the motion and color changes minimal; the lozenge should feel crisp, not bouncy.
Place the lozenge in context in at least two ways: inside a list row as a status marker, and in a control group as a selectable filter or action. The component should stay readable at small sizes, align cleanly with adjacent UI, and preserve its shape when content changes.
Inject a touch of creativity by experimenting with gradients or subtle animations to make your lozenge elements pop. Remember, the lozenge shape is all about smooth curves and comfort.
Better at UI design with every challenge
Select complexity and generate challenge.
Pick a platform.
Get design challenge updates in your inbox
New prompts and challenge updates. It’s free.