Svelte and Tailwindcss Chip component

Chip and alert component built with svelte and tailwindcss

Installation

$npm i -D @fouita/chip

Usage

You can use this component as a simple chip (label) or as an alert.

<script>
    import Chip from '@fouita/chip'
</script>

<div class="flex items-center">
    <Chip class="m-5" >Simple chip</Chip>
</div>

Changing size & color

To change size you can use tailwind size scale xs, sm, md, lg, xl, same goes for colors red, blue, yellow, orange, indigo, pink, purple, gray, green, teal.

You can use outline to change the background with lighter color and make the text darker

<div class="flex items-end">

    <Chip color=red >   Hello! </Chip>
    <Chip outline size=sm color=indigo> Hello! </Chip>
    <Chip size=md color=teal>   Hello! </Chip>
    <Chip outline size=lg color=pink>   Hello! </Chip>

</div>

Change rounding

You can use change the rounding of the Chip component by using the rounded prop and tailwindcss rounded options none, sm, md, lg, full

<div key=k1 class="flex items-end">

    <Chip color=red rounded=none >  Hello! </Chip>
    <Chip outline color=indigo rounded=sm>  Hello! </Chip>
    <Chip color=teal rounded=md>    Hello! </Chip>
    <Chip outline  color=pink rounded=lg>   Hello! </Chip>
    <Chip color=yellow rounded=full>    Hello! </Chip>

</div>

Closing a Chip

To close a Chip you need to pass onDelete prop with close method, like the follwoing. You can also choose the fade duration (in ms) when closing by adding tr_duration={N} , N=200 by default

<script>
    import Chip from '@fouita/chip'
    let show_chip = true
    function removeChip(){
        show_chip = false
    }
</script>

<div key=k1 class="flex items-end p-5">

    {#if show_chip} 
        <Chip color=red rounded=none onDelete={removeChip} tr_duration={500}>   
            Hello! 
        </Chip>
    {/if}

</div>

Add avatar or custom icon

To add an avatar we can use @fouita/avatar , see more on how to use fouita avatar

<script>
    import Avatar from '@fouita/avatar'
    import Chip from '@fouita/chip'
    import {HeartIcon} from 'svelte-feather-icons'
</script>

<div class="flex flex-wrap p-6">
    <Chip outline size=sm rounded=lg color=purple>  
        <div slot=avatar>
            <Avatar size=6 rounded src="https://randomuser.me/api/portraits/women/68.jpg" class="ml-0 my-0 text-xs rounded-lg" />
        </div>
        Hello! 
    </Chip>

    <Chip color=red size=sm rounded=full>   
        <div slot=avatar>
            <HeartIcon class='w-4 h-4 mr-2' />
        </div>
        Hello! 
    </Chip>
</div>

Alerts examples

To use the chip as alerts, here is an example on how you can achieve that!

<script>
  import Chip from "@fouita/chip";
  import {
    AlertOctagonIcon,
    InfoIcon,
    CheckCircleIcon
  } from "svelte-feather-icons";

  let alerts = {
    error1: true,
    error2: true,
    info1: true,
    info2: true,
    success1: true,
    success2: true
  };

  function remove(key) {
    alerts[key] = false;
  }
</script>

<div>
  {#if alerts['error1']}
    <Chip
      outline
      rounded=md
      color=red
      size=xl
      onDelete={() => remove('error1')}
    >
      <div slot=avatar>
        <AlertOctagonIcon class="w-5 h-5 mx-2" />
      </div>
      There is an error in your code
    </Chip>
  {/if}

  {#if alerts['error2']}
    <Chip
      rounded=md
      color=red
      size=xl
      onDelete={() => remove('error2')}
    >
      <div slot=avatar>
        <AlertOctagonIcon class="w-5 h-5 mx-2" />
      </div>
      There is an error in your code
    </Chip>
  {/if}

  <div class="mt-4"></div>
  {#if alerts['info1']}
    <Chip
      outline
      rounded=md
      color=yellow
      size=xl
      onDelete={() => remove('info1')}
    >
      <div slot=avatar>
        <InfoIcon class="w-5 h-5 mx-2" />
      </div>
      <div class="py-2">
        This is an info message
        <div class="text-sm font-base">
          More information about the message can be found
          <a href="/#">here</a>
        </div>
      </div>
    </Chip>
  {/if}

  {#if alerts['info2']}
    <Chip
      rounded=md
      color=yellow
      size=xl
      onDelete={() => remove('info2')}
    >
      <div slot=avatar>
        <InfoIcon class="w-5 h-5 mx-2" />
      </div>
      This is an info message
    </Chip>
  {/if}

  <div class="mt-4"></div>
  {#if alerts['success1']}
    <Chip
      outline
      rounded=md
      color=green
      size=xl
      onDelete={() => remove('success1')}
    >
      <div slot=avatar>
        <CheckCircleIcon class="w-5 h-5 mx-2" />
      </div>
      This is a success messsage
    </Chip>
  {/if}

  {#if alerts['success2']}
    <Chip
      rounded=md
      color=green
      size=xl
      onDelete={() => remove('success2')}
    >
      <div slot=avatar>
        <CheckCircleIcon class="w-5 h-5 mx-2" />
      </div>
      <div class="py-2">
        This is a success messsage
        <div class="text-sm font-base">
          More information about the message can be found
          <a href="/#">here</a>
        </div>
      </div>
    </Chip>
  {/if}

</div>

Source Code

Fouita chip component

About

Fouita : UI framework for svelte + tailwind components