Container

First, import the Chips component from the library. Below is a simple example demonstrating how to use the Chips component. This example shows how to create a chip with a basic text label:

<script>
  import { Chips } from "theui-svelte";
</script>

<Chips>Example Chips</Chips>

In this example the Chips component is used with the text prop which creates a chip displaying the text "Example Chips".

You can enhance the Chips component by including an image alongside the text. Below is a basic example demonstrating how to use the Chips component with an image:

Jasmine Kira Hide chips

Svelte

<Chips imageUrl="/path/to/image.png">...</Chips>

The imageUrl prop specifies the path to the image ("/path/to/image.png"), adding an image to the chip.

The Chips component includes a close button by default, allowing users to dismiss the chip. This is controlled by the close prop, which is set to true by default. If you prefer not to display the close button, you can disable it by setting the close prop to false.

Example Chips

Svelte

<Chips close={false}>...</Chips>

The imageUrl prop specifies the path to the image ("/path/to/image.png"), adding an image to the chip.

The Chips component allows you to adjust its size using the size prop. This prop controls the padding and dimensions of the chip, including any accompanying image. The available size options are:
- sm (small)
- md (medium) – default
- lg (large)

By choosing the appropriate size, you can ensure that the chips fit seamlessly into your design. This flexibility helps you customize the appearance of chips to suit various layout needs.

Jasmine Kira Hide chips Jasmine Kira Hide chips Jasmine Kira Hide chips

Svelte

<Chips size="sm">...</Chips>
<Chips size="md">...</Chips>
<Chips size="lg">...</Chips>

The imageUrl prop specifies the path to the image ("/path/to/image.png"), adding an image to the chip.

The Chips component offers extensive customization options using Tailwind CSS classes. You can easily style both the chip and the accompanying image by applying custom classes through the class and imageClasses props.

<Chips class="border border-red-500 bg-yellow-200">Custom Chip</Chips>

Image Customization

Similarly, you can style the image within the chip using the imageClasses prop. This lets you apply specific styles like borders, padding, and background to the image.

Jasmine Kira Hide chips

Svelte

<Chips imageClasses="border border-brand-primary-500">...</Chips>

The Breadcrumb component is fully accessible, with aria-label="breadcrumb" applied to the navigation container to identify it as a breadcrumb trail for assistive technologies. Each link is keyboard-navigable, and the current page is marked with aria-current="page". You only need to provide meaningful link labels and ensure proper color contrast for readability.