Chip Svelte Component

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

Contents

Chip Components

There are following components included:

  • Chip

Chip Props

NameTypeDefaultDescription
colorsobject

Object with Tailwind CSS colors classes

colors.fillBgIosstring'bg-black/10 dark:bg-white/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/20 dark:border-white/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'
deleteButtonbooleanfalse

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

onDeletefunction(e)

Event will be triggered on Chip delete button click

outlinebooleanfalse

Makes chip outline

onClickfunction(e)

Chip Snippets

NameDescription
media

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

Examples

Chips.svelte
<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Chip,
    Block,
    BlockTitle,
  } from 'konsta/svelte';


</script>


<Page>
  <Navbar title="Chips">
    {#snippet left()}
      {#if !isPreview}
        <NavbarBackLink onclick={() => history.back()} />
      {/if}
    {/snippet}
  </Navbar>


  <BlockTitle>Chips With Text</BlockTitle>
  <Block strong inset>
    <Chip class="m-0.5">Example Chip</Chip>
    <Chip class="m-0.5">Another Chip</Chip>
    <Chip class="m-0.5">One More Chip</Chip>
    <Chip class="m-0.5">Fourth Chip</Chip>
    <Chip class="m-0.5">Last One</Chip>
  </Block>


  <BlockTitle>Outline Chips</BlockTitle>
  <Block strong inset>
    <Chip outline class="m-0.5">Example Chip</Chip>
    <Chip outline class="m-0.5">Another Chip</Chip>
    <Chip outline class="m-0.5">One More Chip</Chip>
    <Chip outline class="m-0.5">Fourth Chip</Chip>
    <Chip outline class="m-0.5">Last One</Chip>
  </Block>


  <BlockTitle>Contact Chips</BlockTitle>
  <Block strong inset>
    <Chip class="m-0.5">
      {#snippet media()}
        <img
          alt="avatar"
          class="ios:h-7 material:h-6 rounded-full"
          src="https://cdn.framework7.io/placeholder/people-100x100-9.jpg"
        />
      {/snippet}
      Jane Doe
    </Chip>
    <Chip class="m-0.5">
      {#snippet media()}
        <img
          alt="avatar"
          class="ios:h-7 material:h-6 rounded-full"
          src="https://cdn.framework7.io/placeholder/people-100x100-3.jpg"
        />
      {/snippet}
      John Doe
    </Chip>
    <Chip class="m-0.5">
      {#snippet media()}
        <img
          alt="avatar"
          class="ios:h-7 material:h-6 rounded-full"
          src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg"
        />
      {/snippet}
      Adam Smith
    </Chip>
  </Block>


  <BlockTitle>Deletable Chips / Tags</BlockTitle>
  <Block strong inset>
    <Chip
      class="m-0.5"
      deleteButton
      onDelete={() => console.log('Delete Chip')}
    >
      Example Chip
    </Chip>
    <Chip
      class="m-0.5"
      deleteButton
      onDelete={() => console.log('Delete Chip')}
    >
      {#snippet media()}
        <img
          alt="avatar"
          class="ios:h-7 material:h-6 rounded-full"
          src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg"
        />
      {/snippet}
      Adam Smith
    </Chip>
  </Block>
  <BlockTitle class=" bg-b bg-b">Color Chips</BlockTitle>
  <Block strong inset>
    <Chip
      class="m-0.5"
      colors={{ fillBg: 'bg-red-500', fillText: 'text-white' }}
    >
      Red Chip
    </Chip>
    <Chip
      class="m-0.5"
      colors={{ fillBg: 'bg-green-500', fillText: 'text-white' }}
    >
      Green Chip
    </Chip>
    <Chip
      class="m-0.5"
      colors={{ fillBg: 'bg-blue-500', fillText: 'text-white' }}
    >
      Blue Chip
    </Chip>
    <Chip
      class="m-0.5"
      colors={{ fillBg: 'bg-yellow-500', fillText: 'text-white' }}
    >
      Yellow Chip
    </Chip>
    <Chip
      class="m-0.5"
      colors={{ fillBg: 'bg-pink-500', fillText: 'text-white' }}
    >
      Pink Chip
    </Chip>
    <Chip
      class="m-0.5"
      outline
      colors={{ outlineBorder: 'border-red-500', outlineText: 'text-red-500' }}
    >
      Red Chip
    </Chip>
    <Chip
      class="m-0.5"
      outline
      colors={{
        outlineBorder: 'border-green-500',
        outlineText: 'text-green-500',
      }}
    >
      Green Chip
    </Chip>
    <Chip
      class="m-0.5"
      outline
      colors={{
        outlineBorder: 'border-blue-500',
        outlineText: 'text-blue-500',
      }}
    >
      Blue Chip
    </Chip>
    <Chip
      class="m-0.5"
      outline
      colors={{
        outlineBorder: 'border-yellow-500',
        outlineText: 'text-yellow-500',
      }}
    >
      Yellow Chip
    </Chip>
    <Chip
      class="m-0.5"
      outline
      colors={{
        outlineBorder: 'border-pink-500',
        outlineText: 'text-pink-500',
      }}
    >
      Pink Chip
    </Chip>
  </Block>
</Page>
Code licensed under MIT.
2025 © Konsta UI by nolimits4web.