🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool! 🔥

Chip React Component

Chips (Tags) React component represent complex entities in small blocks, such as a contact. They can contain a photo, short title string, and brief information

Chip Components

There are following components included:

  • Chip

Chip Props

NameTypeDefaultDescription
colorsobject

Object with Tailwind CSS colors classes

colors.fillBgIosstring'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-10'
colors.fillBgMaterialstring'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'
colors.fillTextIosstring'text-current'
colors.fillTextMaterialstring'text-md-light-on-secondary-container dark:text-md-dark-on-secondary-container'
colors.outlineBorderIosstring'border-black border-opacity-20 dark:border-white dark:border-opacity-20'
colors.outlineBorderMaterialstring'border-md-light-outline dark:border-md-dark-outline'
colors.outlineTextIosstring'text-current'
colors.outlineTextMaterialstring'text-md-light-on-surface dark:text-md-dark-on-surface'
componentstring'div'

Component's HTML Element

deleteButtonbooleanfalse

Defines whether the Chip has additional "delete" button or not

mediaReactNode

Content of the chip media area (e.g. icon)

outlinebooleanfalse

Makes chip outline

onDeletefunction(e)

Event will be triggered on Chip delete button click

Examples

Chips.jsx
import React from 'react';
import {
Page,
Navbar,
NavbarBackLink,
Chip,
Block,
BlockTitle,
} from 'konsta/react';
export default function ChipsPage() {
return (
<Page>
<Navbar
title="Chips"
/>
<BlockTitle>Chips With Text</BlockTitle>
<Block strongIos outlineIos>
<Chip className="m-0.5">Example Chip</Chip>
<Chip className="m-0.5">Another Chip</Chip>
<Chip className="m-0.5">One More Chip</Chip>
<Chip className="m-0.5">Fourth Chip</Chip>
<Chip className="m-0.5">Last One</Chip>
</Block>
<BlockTitle>Outline Chips</BlockTitle>
<Block strongIos outlineIos>
<Chip outline className="m-0.5">
Example Chip
</Chip>
<Chip outline className="m-0.5">
Another Chip
</Chip>
<Chip outline className="m-0.5">
One More Chip
</Chip>
<Chip outline className="m-0.5">
Fourth Chip
</Chip>
<Chip outline className="m-0.5">
Last One
</Chip>
</Block>
<BlockTitle>Contact Chips</BlockTitle>
<Block strongIos outlineIos>
<Chip
className="m-0.5"
media={
<img
alt="avatar"
className="ios:h-7 material:h-6 rounded-full"
src="https://cdn.framework7.io/placeholder/people-100x100-9.jpg"
/>
}
>
Jane Doe
</Chip>
<Chip
className="m-0.5"
media={
<img
alt="avatar"
className="ios:h-7 material:h-6 rounded-full"
src="https://cdn.framework7.io/placeholder/people-100x100-3.jpg"
/>
}
>
John Doe
</Chip>
<Chip
className="m-0.5"
media={
<img
alt="avatar"
className="ios:h-7 material:h-6 rounded-full"
src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg"
/>
}
>
Adam Smith
</Chip>
</Block>
<BlockTitle>Deletable Chips / Tags</BlockTitle>
<Block strongIos outlineIos>
<Chip
className="m-0.5"
deleteButton
onDelete={() => console.log('Delete Chip')}
>
Example Chip
</Chip>
<Chip
className="m-0.5"
deleteButton
onDelete={() => console.log('Delete Chip')}
media={
<img
alt="avatar"
className="ios:h-7 material:h-6 rounded-full"
src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg"
/>
}
>
Adam Smith
</Chip>
</Block>
<BlockTitle>Color Chips</BlockTitle>
<Block strongIos outlineIos>
<Chip
className="m-0.5"
colors={{ fillBg: 'bg-red-500', fillText: 'text-white' }}
>
Red Chip
</Chip>
<Chip
className="m-0.5"
colors={{ fillBg: 'bg-green-500', fillText: 'text-white' }}
>
Green Chip
</Chip>
<Chip
className="m-0.5"
colors={{ fillBg: 'bg-blue-500', fillText: 'text-white' }}
>
Blue Chip
</Chip>
<Chip
className="m-0.5"
colors={{ fillBg: 'bg-yellow-500', fillText: 'text-white' }}
>
Yellow Chip
</Chip>
<Chip
className="m-0.5"
colors={{ fillBg: 'bg-pink-500', fillText: 'text-white' }}
>
Pink Chip
</Chip>
<Chip
className="m-0.5"
outline
colors={{
outlineBorder: 'border-red-500',
outlineText: 'text-red-500',
}}
>
Red Chip
</Chip>
<Chip
className="m-0.5"
outline
colors={{
outlineBorder: 'border-green-500',
outlineText: 'text-green-500',
}}
>
Green Chip
</Chip>
<Chip
className="m-0.5"
outline
colors={{
outlineBorder: 'border-blue-500',
outlineText: 'text-blue-500',
}}
>
Blue Chip
</Chip>
<Chip
className="m-0.5"
outline
colors={{
outlineBorder: 'border-yellow-500',
outlineText: 'text-yellow-500',
}}
>
Yellow Chip
</Chip>
<Chip
className="m-0.5"
outline
colors={{
outlineBorder: 'border-pink-500',
outlineText: 'text-pink-500',
}}
>
Pink Chip
</Chip>
</Block>
</Page>
);
}
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.