Chip

Compact pill-shaped labels for tags, filters, status indicators, and attributes.

Playground

Design System

primary

Design System

secondary

Design System

neutral

Design System

success

Design System

warning

Design System

error

Design System

info

Controls

Appearance

Variant

Size

Disabled

Deletable

Background

Labels

Theme

HTMLReact

ShareCopy

Usage

<lt-chip variant="primary">Design</lt-chip>
<lt-chip variant="success" appearance="outlined">Active</lt-chip>
<lt-chip variant="error" deletable>Urgent</lt-chip>

import { Chip } from '@latty-ds/react';

<Chip variant="primary">Design</Chip>
<Chip variant="success" appearance="outlined">Active</Chip>
<Chip variant="error" deletable>Urgent</Chip>

<template>
<lt-chip variant="primary">Design</lt-chip>
<lt-chip variant="success" appearance="outlined">Active</lt-chip>
<lt-chip variant="error" deletable>Urgent</lt-chip>
</template>

API