# Chips The `Chips` component shows a short piece of information as a pill, such as a tag, a category or a selected person. It takes text, an optional image and an optional close button. ## Example 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: ```html Example Chips ``` In this example the text placed inside the `Chips` component creates a chip displaying the text "Example Chips". ## Chips With Image You can put an image next to the text. Below is a basic example demonstrating how to use the Chips component with an image: ```html ... ``` The `imgSrc` prop specifies the path to the image ("/path/to/image.png"), adding an image to the chip. Use the `altText` prop to set the image's alternative text for screen readers. It is an empty string by default, which marks the image as decorative, so set it when the image carries meaning. ## Close Button The `Chips` component can display a close button, allowing users to dismiss the chip. This is controlled by the `close` prop, which is set to `false` by default. To display the close button, set the `close` prop to `true`. ```html ... ``` Clicking the close button hides the chip. ## Sizes The `Chips` component allows you to adjust its size using the `size` prop. This prop controls the dimensions of the chip's image. The available size options are: - **sm** (small) - **md** (medium) - *default* - **lg** (large) Pick the size that matches the text around the chip. ```html ... ... ... ``` The `size` prop only takes effect when an image is added using the `imgSrc` prop. ## Rounded Corner The `rounded` prop in the `Chips` component controls its border radius. Values: `none`, `sm`, `md`, `lg`, `xl`, `2xl`, `full`. Default is `full`. ```html ... ... ... ... ... ``` ## Customization 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 `imgClasses` props. ### Chip Customization To customize the chip's appearance, use the `class` prop to add your own Tailwind CSS classes. This allows you to control the border, background, padding, and more. ```html Custom Chip ``` ### Image Customization Similarly, you can style the image within the chip using the `imgClasses` prop. This lets you apply specific styles like borders, padding, and background to the image. ```html ... ``` ## Accessibility The `Chips` component supports accessibility best practices. When an image is used, it includes proper `alt` text for screen readers. If the `close` prop is enabled, the close button includes an `aria-label` to describe its action, allowing users to remove chips with assistive technologies. When the `href` prop is set, the chip renders as a link; otherwise it gets `role="button"`. The component maintains proper semantics and structure for clear navigation and interaction. ## Configuration ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `close` | boolean | `false` | Determines whether a close button is displayed on the chip. Set to true to show the close button. | | `size` | 'sm' \| 'md' \| 'lg' | `md` | Sets the size of the chip's image. Only applies when imgSrc is set. 'md' is the default size. | | `imgSrc` | string \| undefined | `undefined` | The URL of the image to display within the chip. Leave undefined if no image is used. | | `imgClasses` | string | - | Custom CSS classes to apply to the chip's image for additional styling. | | `altText` | string | - | The alternative text for the chip's image, enhancing accessibility. | | `rounded` | [ROUNDED](https://www.theui.dev/docs/types#rounded-type) | `full` | Determines the border-radius style of the chip for rounded corners. | | `href` | string \| undefined | `undefined` | If set, the chip is rendered as a link (``) pointing to this URL instead of a ``. | --- Category: Components Keywords: chips, tags, filters, interactive, component, svelte, svelte-5, theui-svelte, component-library, ui, tailwindcss Full documentation set: https://www.theui.dev/llms-full.txt