Chips

Compact elements that represent an input, attribute, or action

Chip Variants

Filled Chip

Outlined Chip

Elevated Chip

Assist Chip

Filter Chip

Input Chip

Suggestion Chip

Chips with Icons

Leading Icon

Trailing Icon

Both Icons

Selectable Chips

Create independant selectable chips (without chipset)

Filled

Outlined

Filter

Filter Chip Set

Filter by:

Paid

Free

Trial

Subscription

Input Chips

john@example.com

jane@example.com

team@example.com

Add email address

Interactive Chip Example

Select your city:

New York

Los Angeles

Chicago

San Francisco

Please select a city

Or enter your own city:

Custom city

mtrl is a lightweight, composable TypeScript/JavaScript component library inspired by Material Design principles. Built with zero dependencies, MTRL provides a robust foundation for creating modern web interfaces with an emphasis on performance, type safety, and accessibility.

Links

npm GitHub X