mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 11:36:36 +00:00
Code Issues Projects Releases Packages Wiki Activity
carbon-components-svelte/COMPONENT_INDEX.md
albert 6f536e9936 fix(button): add default value
2020-10-04 20:33:17 +02:00

5313 lines
134 KiB
Markdown
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# Component Index
> 147 components exported from carbon-components-svelte 0.15.0
- Accordion
- [AccordionSkeleton](#accordionskeleton)
- [Accordion](#accordion)
- [AccordionItem](#accordionitem)
- Breadcrumb
- [BreadcrumbSkeleton](#breadcrumbskeleton)
- [Breadcrumb](#breadcrumb)
- [BreadcrumbItem](#breadcrumbitem)
- Button
- [ButtonSkeleton](#buttonskeleton)
- [Button](#button)
- [ButtonSet](#buttonset)
- Checkbox
- [CheckboxSkeleton](#checkboxskeleton)
- [Checkbox](#checkbox)
- CodeSnippet
- [CodeSnippetSkeleton](#codesnippetskeleton)
- [CodeSnippet](#codesnippet)
- [ComboBox](#combobox)
- ComposedModal
- [ComposedModal](#composedmodal)
- [ModalBody](#modalbody)
- [ModalFooter](#modalfooter)
- [ModalHeader](#modalheader)
- ContentSwitcher
- [ContentSwitcher](#contentswitcher)
- [Switch](#switch)
- [Copy](#copy)
- [CopyButton](#copybutton)
- DataTable
- [DataTable](#datatable)
- [Table](#table)
- [TableBody](#tablebody)
- [TableCell](#tablecell)
- [TableContainer](#tablecontainer)
- [TableHead](#tablehead)
- [TableHeader](#tableheader)
- [TableRow](#tablerow)
- [DataTableSkeleton](#datatableskeleton)
- DatePicker
- [DatePickerSkeleton](#datepickerskeleton)
- [DatePicker](#datepicker)
- [DatePickerInput](#datepickerinput)
- Dropdown
- [DropdownSkeleton](#dropdownskeleton)
- [Dropdown](#dropdown)
- FileUploader
- [FileUploaderSkeleton](#fileuploaderskeleton)
- [FileUploader](#fileuploader)
- [FileUploaderButton](#fileuploaderbutton)
- [FileUploaderDropContainer](#fileuploaderdropcontainer)
- [FileUploaderItem](#fileuploaderitem)
- [Filename](#filename)
- [FluidForm](#fluidform)
- [Form](#form)
- [FormGroup](#formgroup)
- [FormItem](#formitem)
- [FormLabel](#formlabel)
- Grid
- [Column](#column)
- [Grid](#grid)
- [Row](#row)
- Icon
- [IconSkeleton](#iconskeleton)
- [Icon](#icon)
- [InlineLoading](#inlineloading)
- [Link](#link)
- ListBox
- [ListBox](#listbox)
- [ListBoxField](#listboxfield)
- [ListBoxMenu](#listboxmenu)
- [ListBoxMenuIcon](#listboxmenuicon)
- [ListBoxMenuItem](#listboxmenuitem)
- [ListBoxSelection](#listboxselection)
- [ListItem](#listitem)
- [Loading](#loading)
- [Modal](#modal)
- [MultiSelect](#multiselect)
- Notification
- [InlineNotification](#inlinenotification)
- [NotificationActionButton](#notificationactionbutton)
- [NotificationButton](#notificationbutton)
- [NotificationIcon](#notificationicon)
- [NotificationTextDetails](#notificationtextdetails)
- [ToastNotification](#toastnotification)
- NumberInput
- [NumberInputSkeleton](#numberinputskeleton)
- [NumberInput](#numberinput)
- [OrderedList](#orderedlist)
- OverflowMenu
- [OverflowMenu](#overflowmenu)
- [OverflowMenuItem](#overflowmenuitem)
- Pagination
- [PaginationSkeleton](#paginationskeleton)
- [Pagination](#pagination)
- [PaginationNav](#paginationnav)
- ProgressIndicator
- [ProgressIndicatorSkeleton](#progressindicatorskeleton)
- [ProgressIndicator](#progressindicator)
- [ProgressStep](#progressstep)
- RadioButton
- [RadioButtonSkeleton](#radiobuttonskeleton)
- [RadioButton](#radiobutton)
- [RadioButtonGroup](#radiobuttongroup)
- Search
- [SearchSkeleton](#searchskeleton)
- [Search](#search)
- Select
- [SelectSkeleton](#selectskeleton)
- [Select](#select)
- [SelectItem](#selectitem)
- [SelectItemGroup](#selectitemgroup)
- [SkeletonPlaceholder](#skeletonplaceholder)
- [SkeletonText](#skeletontext)
- Slider
- [SliderSkeleton](#sliderskeleton)
- [Slider](#slider)
- StructuredList
- [StructuredListSkeleton](#structuredlistskeleton)
- [StructuredList](#structuredlist)
- [StructuredListBody](#structuredlistbody)
- [StructuredListCell](#structuredlistcell)
- [StructuredListHead](#structuredlisthead)
- [StructuredListInput](#structuredlistinput)
- [StructuredListRow](#structuredlistrow)
- Tabs
- [Tab](#tab)
- [TabContent](#tabcontent)
- [Tabs](#tabs)
- [TabsSkeleton](#tabsskeleton)
- Tag
- [TagSkeleton](#tagskeleton)
- [Tag](#tag)
- TextArea
- [TextAreaSkeleton](#textareaskeleton)
- [TextArea](#textarea)
- TextInput
- [PasswordInput](#passwordinput)
- [TextInputSkeleton](#textinputskeleton)
- [TextInput](#textinput)
- Tile
- [ClickableTile](#clickabletile)
- [ExpandableTile](#expandabletile)
- [RadioTile](#radiotile)
- [SelectableTile](#selectabletile)
- [Tile](#tile)
- [TileGroup](#tilegroup)
- TimePicker
- [TimePicker](#timepicker)
- [TimePickerSelect](#timepickerselect)
- Toggle
- [ToggleSkeleton](#toggleskeleton)
- [Toggle](#toggle)
- ToggleSmall
- [ToggleSmallSkeleton](#togglesmallskeleton)
- [ToggleSmall](#togglesmall)
- [Tooltip](#tooltip)
- [TooltipDefinition](#tooltipdefinition)
- [TooltipIcon](#tooltipicon)
- UIShell
- [Content](#content)
- [Header](#header)
- [HeaderAction](#headeraction)
- [HeaderActionLink](#headeractionlink)
- [HeaderActionSearch](#headeractionsearch)
- [HeaderNav](#headernav)
- [HeaderNavItem](#headernavitem)
- [HeaderNavMenu](#headernavmenu)
- [HeaderPanelDivider](#headerpaneldivider)
- [HeaderPanelLink](#headerpanellink)
- [HeaderPanelLinks](#headerpanellinks)
- [HeaderUtilities](#headerutilities)
- [HeaderGlobalAction](#headerglobalaction)
- [SideNav](#sidenav)
- [SideNavItems](#sidenavitems)
- [SideNavLink](#sidenavlink)
- [SideNavMenu](#sidenavmenu)
- [SideNavMenuItem](#sidenavmenuitem)
- [SkipToContent](#skiptocontent)
- [UnorderedList](#unorderedlist)
---
## Accordion
### Import path
```js
import { Accordion } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :-------------------------------- | :------------ |
| align | <code>"start" &#124; "end"</code> | "end" |
| skeleton | <code>boolean</code> | false |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## AccordionItem
### Import path
```js
import { AccordionItem } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------------- | :------------------- | :---------------- |
| title | <code>string</code> | "title" |
| open | <code>boolean</code> | false |
| iconDescription | <code>string</code> | "Expand/Collapse" |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:animationend`
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
- `on:keydown`
### Dispatched events
No dispatched events.
---
## AccordionSkeleton
### Import path
```js
import { AccordionSkeleton } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------- | :------------ |
| count | <code>number</code> | 4 |
| open | <code>boolean</code> | true |
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## Breadcrumb
### Import path
```js
import { Breadcrumb } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------------- | :------------------- | :------------ |
| noTrailingSlash | <code>boolean</code> | false |
| skeleton | <code>boolean</code> | false |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## BreadcrumbItem
### Import path
```js
import { BreadcrumbItem } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :------------ | :------------------- | :------------ |
| href | <code>string</code> | -- |
| isCurrentPage | <code>boolean</code> | false |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## BreadcrumbSkeleton
### Import path
```js
import { BreadcrumbSkeleton } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------------- | :------------------- | :------------ |
| noTrailingSlash | <code>boolean</code> | false |
| count | <code>number</code> | 3 |
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## Button
### Import path
```js
import { Button } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :--------------- | :----------------------------------------------------------------------------------------- | :------------ |
| kind | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger"</code> | "primary" |
| size | <code>"default" &#124; "field" &#124; "small"</code> | "default" |
| hasIconOnly | <code>boolean</code> | false |
| icon | <code>typeof import("carbon-icons-svelte/lib/Add16").default</code> | -- |
| iconPosition | <code>"left" &#124; "right"</code> | "right" |
| iconDescription | <code>string</code> | -- |
| tooltipAlignment | <code>"start" &#124; "center" &#124; "end"</code> | -- |
| tooltipPosition | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | -- |
| as | <code>boolean</code> | false |
| skeleton | <code>boolean</code> | false |
| disabled | <code>boolean</code> | false |
| href | <code>string</code> | -- |
| tabindex | <code>string</code> | "0" |
| type | <code>string</code> | "button" |
| ref | <code>null &#124; HTMLAnchorElement &#124; HTMLButtonElement</code> | null |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## ButtonSet
### Import path
```js
import { ButtonSet } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------- | :------------ |
| stacked | <code>boolean</code> | false |
### Slots
- `<slot>...</slot>`
### Forwarded events
No forwarded events.
### Dispatched events
No dispatched events.
---
## ButtonSkeleton
### Import path
```js
import { ButtonSkeleton } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------- | :------------ |
| href | <code>string</code> | -- |
| small | <code>boolean</code> | false |
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## Checkbox
### Import path
```js
import { Checkbox } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :------------ | :---------------------------------------- | :------------ |
| checked | <code>boolean</code> | false |
| indeterminate | <code>boolean</code> | false |
| skeleton | <code>boolean</code> | false |
| readonly | <code>boolean</code> | false |
| disabled | <code>boolean</code> | false |
| labelText | <code>string</code> | "" |
| hideLabel | <code>boolean</code> | false |
| name | <code>string</code> | "" |
| title | <code>string</code> | -- |
| id | <code>string</code> | -- |
| ref | <code>null &#124; HTMLInputElement</code> | null |
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
- `on:change`
### Dispatched events
- `on:check`
---
## CheckboxSkeleton
### Import path
```js
import { CheckboxSkeleton } from "carbon-components-svelte";
```
### Props
No exported props.
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## ClickableTile
### Import path
```js
import { ClickableTile } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------- | :------------ |
| clicked | <code>boolean</code> | false |
| light | <code>boolean</code> | false |
| href | <code>string</code> | -- |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:keydown`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## CodeSnippet
### Import path
```js
import { CodeSnippet } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------------------- | :--------------------------------------------------- | :------------ |
| type | <code>"single" &#124; "inline" &#124; "multi"</code> | "single" |
| code | <code>string</code> | -- |
| expanded | <code>boolean</code> | false |
| hideCopyButton | <code>boolean</code> | false |
| light | <code>boolean</code> | false |
| skeleton | <code>boolean</code> | false |
| copyButtonDescription | <code>string</code> | -- |
| copyLabel | <code>string</code> | -- |
| feedback | <code>string</code> | "Copied!" |
| feedbackTimeout | <code>number</code> | 2000 |
| showLessText | <code>string</code> | "Show less" |
| showMoreText | <code>string</code> | "Show more" |
| showMoreLess | <code>boolean</code> | false |
| id | <code>string</code> | -- |
| ref | <code>null &#124; HTMLPreElement</code> | null |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
- `on:animationend`
### Dispatched events
No dispatched events.
---
## CodeSnippetSkeleton
### Import path
```js
import { CodeSnippetSkeleton } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :--------------------------------------------------- | :------------ |
| type | <code>"single" &#124; "inline" &#124; "multi"</code> | "single" |
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## Column
### Import path
```js
import { Column } from "carbon-components-svelte";
```
### Props
```ts
// `Column` type definitions
type ColumnSize = boolean | number;
interface ColumnSizeDescriptor {
span?: ColumnSize;
offset: number;
}
type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;
```
| Prop name | Type | Default value |
| :------------ | :------------------------------------------------------------------------------------------------- | :------------ |
| as | <code>boolean</code> | false |
| noGutter | <code>boolean</code> | false |
| noGutterLeft | <code>boolean</code> | false |
| noGutterRight | <code>boolean</code> | false |
| aspectRatio | <code>"2x1" &#124; "16x9" &#124; "9x16" &#124; "1x2" &#124; "4x3" &#124; "3x4" &#124; "1x1"</code> | -- |
| sm | <code>ColumnBreakpoint</code> | -- |
| md | <code>ColumnBreakpoint</code> | -- |
| lg | <code>ColumnBreakpoint</code> | -- |
| xlg | <code>ColumnBreakpoint</code> | -- |
| max | <code>ColumnBreakpoint</code> | -- |
### Slots
- `<slot>...</slot>`
### Forwarded events
No forwarded events.
### Dispatched events
No dispatched events.
---
## ComboBox
### Import path
```js
import { ComboBox } from "carbon-components-svelte";
```
### Props
```ts
// `ComboBox` type definitions
interface ComboBoxItem {
id: string;
text: string;
}
```
| Prop name | Type | Default value |
| :--------------- | :---------------------------------------------------------- | :------------ |
| items | <code>ComboBoxItem[]</code> | -- |
| itemToString | <code>(item: ComboBoxItem) => string</code> | -- |
| selectedIndex | <code>number</code> | -- |
| value | <code>string</code> | "" |
| size | <code>"sm" &#124; "xl"</code> | -- |
| disabled | <code>boolean</code> | false |
| titleText | <code>string</code> | "" |
| placeholder | <code>string</code> | "" |
| helperText | <code>string</code> | "" |
| invalidText | <code>string</code> | "" |
| invalid | <code>boolean</code> | false |
| light | <code>boolean</code> | false |
| open | <code>boolean</code> | false |
| shouldFilterItem | <code>(item: ComboBoxItem, value: string) => boolean</code> | -- |
| translateWithId | <code>(id: any) => string</code> | -- |
| id | <code>string</code> | -- |
| name | <code>string</code> | -- |
| ref | <code>null &#124; HTMLInputElement</code> | null |
### Slots
No slots.
### Forwarded events
- `on:keydown`
- `on:focus`
- `on:blur`
- `on:clear`
### Dispatched events
- `on:select`
---
## ComposedModal
### Import path
```js
import { ComposedModal } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :------------------------- | :---------------------------------------- | :--------------------------- |
| size | <code>"xs" &#124; "sm" &#124; "lg"</code> | -- |
| open | <code>boolean</code> | false |
| danger | <code>boolean</code> | false |
| preventCloseOnClickOutside | <code>boolean</code> | false |
| containerClass | <code>string</code> | "" |
| selectorPrimaryFocus | <code>string</code> | "[data-modal-primary-focus]" |
| ref | <code>null &#124; HTMLElement</code> | null |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
- `on:transitionend`
### Dispatched events
- `on:submit`
- `on:close`
- `on:open`
---
## Content
### Import path
```js
import { Content } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------ | :------------- |
| id | <code>string</code> | "main-content" |
### Slots
- `<slot>...</slot>`
### Forwarded events
No forwarded events.
### Dispatched events
No dispatched events.
---
## ContentSwitcher
### Import path
```js
import { ContentSwitcher } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :------------ | :------------------- | :------------ |
| selectedIndex | <code>number</code> | 0 |
| light | <code>boolean</code> | false |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
- `on:change`
---
## Copy
### Import path
```js
import { Copy } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------------- | :----------------------------------------- | :------------ |
| feedback | <code>string</code> | "Copied!" |
| feedbackTimeout | <code>number</code> | 2000 |
| ref | <code>null &#124; HTMLButtonElement</code> | null |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:animationend`
### Dispatched events
No dispatched events.
---
## CopyButton
### Import path
```js
import { CopyButton } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------------- | :------------------ | :------------------ |
| iconDescription | <code>string</code> | "Copy to clipboard" |
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:animationend`
### Dispatched events
No dispatched events.
---
## DataTable
### Import path
```js
import { DataTable } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :----------- | :-------------------------------------------------- | :------------ |
| headers | <code>{key: string; value: string;}[]</code> | -- |
| rows | <code>Object[]</code> | -- |
| size | <code>"compact" &#124; "short" &#124; "tall"</code> | -- |
| title | <code>string</code> | "" |
| description | <code>string</code> | "" |
| zebra | <code>boolean</code> | false |
| sortable | <code>boolean</code> | false |
| stickyHeader | <code>boolean</code> | false |
### Slots
- `<slot>...</slot>`
### Forwarded events
No forwarded events.
### Dispatched events
- `on:click`
- `on:click:header`
- `on:click:row`
- `on:click:cell`
---
## DataTableSkeleton
### Import path
```js
import { DataTableSkeleton } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :---------- | :-------------------------------------------------- | :------------ |
| columns | <code>number</code> | 5 |
| rows | <code>number</code> | 5 |
| size | <code>"compact" &#124; "short" &#124; "tall"</code> | -- |
| zebra | <code>boolean</code> | false |
| showHeader | <code>boolean</code> | true |
| headers | <code>string[]</code> | -- |
| showToolbar | <code>boolean</code> | true |
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## DatePicker
### Import path
```js
import { DatePicker } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :------------- | :--------------------------------------------------- | :------------ |
| datePickerType | <code>"simple" &#124; "single" &#124; "range"</code> | "simple" |
| value | <code>string</code> | "" |
| appendTo | <code>HTMLElement</code> | -- |
| dateFormat | <code>string</code> | "m/d/Y" |
| maxDate | <code>null &#124; string &#124; Date</code> | null |
| minDate | <code>null &#124; string &#124; Date</code> | null |
| locale | <code>string</code> | "en" |
| short | <code>boolean</code> | false |
| light | <code>boolean</code> | false |
| id | <code>string</code> | -- |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
- `on:change`
---
## DatePickerInput
### Import path
```js
import { DatePickerInput } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------------- | :---------------------------------------- | :----------------------------- |
| size | <code>"sm" &#124; "xl"</code> | -- |
| type | <code>string</code> | "text" |
| placeholder | <code>string</code> | "" |
| pattern | <code>string</code> | "\\d{1,2}\\/\\d{1,2}\\/\\d{4}" |
| disabled | <code>boolean</code> | false |
| iconDescription | <code>string</code> | "" |
| id | <code>string</code> | -- |
| labelText | <code>string</code> | "" |
| hideLabel | <code>boolean</code> | false |
| invalid | <code>boolean</code> | false |
| invalidText | <code>string</code> | "" |
| name | <code>string</code> | -- |
| ref | <code>null &#124; HTMLInputElement</code> | null |
### Slots
No slots.
### Forwarded events
- `on:input`
- `on:keydown`
- `on:blur`
### Dispatched events
No dispatched events.
---
## DatePickerSkeleton
### Import path
```js
import { DatePickerSkeleton } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------- | :------------ |
| range | <code>boolean</code> | false |
| id | <code>string</code> | -- |
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## Dropdown
### Import path
```js
import { Dropdown } from "carbon-components-svelte";
```
### Props
```ts
// `Dropdown` type definitions
type DropdownItemId = string;
type DropdownItemText = string;
interface DropdownItem {
id: DropdownItemId;
text: DropdownItemText;
}
```
| Prop name | Type | Default value |
| :-------------- | :------------------------------------------ | :------------ |
| items | <code>DropdownItem[]</code> | -- |
| itemToString | <code>(item: DropdownItem) => string</code> | -- |
| selectedIndex | <code>number</code> | -- |
| type | <code>"default" &#124; "inline"</code> | "default" |
| size | <code>"sm" &#124; "lg" &#124; "xl"</code> | -- |
| open | <code>boolean</code> | false |
| inline | <code>boolean</code> | false |
| light | <code>boolean</code> | false |
| disabled | <code>boolean</code> | false |
| titleText | <code>string</code> | "" |
| invalid | <code>boolean</code> | false |
| invalidText | <code>string</code> | "" |
| helperText | <code>string</code> | "" |
| label | <code>string</code> | -- |
| translateWithId | <code>(id: any) => string</code> | -- |
| id | <code>string</code> | -- |
| name | <code>string</code> | -- |
| ref | <code>null &#124; HTMLButtonElement</code> | null |
### Slots
No slots.
### Forwarded events
No forwarded events.
### Dispatched events
No dispatched events.
---
## DropdownSkeleton
### Import path
```js
import { DropdownSkeleton } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------- | :------------ |
| inline | <code>boolean</code> | false |
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## ExpandableTile
### Import path
```js
import { ExpandableTile } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------------------- | :----------------------------------- | :-------------------------- |
| expanded | <code>boolean</code> | false |
| light | <code>boolean</code> | false |
| tileMaxHeight | <code>number</code> | 0 |
| tilePadding | <code>number</code> | 0 |
| tileCollapsedIconText | <code>string</code> | "Interact to expand Tile" |
| tileExpandedIconText | <code>string</code> | "Interact to collapse Tile" |
| tabindex | <code>string</code> | "0" |
| id | <code>string</code> | -- |
| ref | <code>null &#124; HTMLElement</code> | null |
### Slots
- `<slot name="above">...</slot>`
- `<slot name="below">...</slot>`
### Forwarded events
- `on:click`
- `on:keypress`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## FileUploader
### Import path
```js
import { FileUploader } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :---------------------- | :----------------------------------------------------------------------------------------- | :------------------------- |
| status | <code>"uploading" &#124; "edit" &#124; "complete"</code> | "uploading" |
| accept | <code>string[]</code> | -- |
| files | <code>string[]</code> | -- |
| multiple | <code>boolean</code> | false |
| clearFiles (`constant`) | <code>() => any</code> | -- |
| labelDescription | <code>string</code> | "" |
| labelTitle | <code>string</code> | "" |
| kind | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger"</code> | "primary" |
| buttonLabel | <code>string</code> | "" |
| iconDescription | <code>string</code> | "Provide icon description" |
| name | <code>string</code> | "" |
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
- `on:change`
- `on:keydown`
### Dispatched events
- `on:add`
- `on:remove`
---
## FileUploaderButton
### Import path
```js
import { FileUploaderButton } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :------------------ | :----------------------------------------------------------------------------------------- | :------------ |
| accept | <code>string[]</code> | -- |
| multiple | <code>boolean</code> | false |
| disabled | <code>boolean</code> | false |
| disableLabelChanges | <code>boolean</code> | false |
| kind | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger"</code> | "primary" |
| labelText | <code>string</code> | "Add file" |
| role | <code>string</code> | "button" |
| tabindex | <code>string</code> | "0" |
| id | <code>string</code> | -- |
| name | <code>string</code> | "" |
| ref | <code>null &#124; HTMLInputElement</code> | null |
### Slots
No slots.
### Forwarded events
- `on:keydown`
- `on:change`
- `on:click`
### Dispatched events
No dispatched events.
---
## FileUploaderDropContainer
### Import path
```js
import { FileUploaderDropContainer } from "carbon-components-svelte";
```
### Props
```ts
// `FileUploaderDropContainer` type definitions
type Files = string[];
```
| Prop name | Type | Default value |
| :------------ | :---------------------------------------- | :------------ |
| accept | <code>string[]</code> | -- |
| multiple | <code>boolean</code> | false |
| validateFiles | <code>(files: Files) => Files</code> | -- |
| labelText | <code>string</code> | "Add file" |
| role | <code>string</code> | "button" |
| disabled | <code>boolean</code> | false |
| tabindex | <code>string</code> | "0" |
| id | <code>string</code> | -- |
| name | <code>string</code> | "" |
| ref | <code>null &#124; HTMLInputElement</code> | null |
### Slots
No slots.
### Forwarded events
- `on:dragover`
- `on:dragleave`
- `on:drop`
- `on:keydown`
- `on:change`
- `on:click`
### Dispatched events
- `on:add`
---
## FileUploaderItem
### Import path
```js
import { FileUploaderItem } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------------- | :------------------------------------------------------- | :------------ |
| status | <code>"uploading" &#124; "edit" &#124; "complete"</code> | "uploading" |
| iconDescription | <code>string</code> | "" |
| invalid | <code>boolean</code> | false |
| errorSubject | <code>string</code> | "" |
| errorBody | <code>string</code> | "" |
| id | <code>string</code> | -- |
| name | <code>string</code> | "" |
### Slots
No slots.
### Forwarded events
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
- `on:delete`
---
## FileUploaderSkeleton
### Import path
```js
import { FileUploaderSkeleton } from "carbon-components-svelte";
```
### Props
No exported props.
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## Filename
### Import path
```js
import { Filename } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------------- | :------------------------------------------------------- | :------------ |
| status | <code>"uploading" &#124; "edit" &#124; "complete"</code> | "uploading" |
| iconDescription | <code>string</code> | "" |
| invalid | <code>boolean</code> | false |
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:keydown`
### Dispatched events
No dispatched events.
---
## FluidForm
### Import path
```js
import { FluidForm } from "carbon-components-svelte";
```
### Props
No exported props.
### Slots
- `<slot>...</slot>`
### Forwarded events
No forwarded events.
### Dispatched events
No dispatched events.
---
## Form
### Import path
```js
import { Form } from "carbon-components-svelte";
```
### Props
No exported props.
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
- `on:submit`
### Dispatched events
No dispatched events.
---
## FormGroup
### Import path
```js
import { FormGroup } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :---------- | :------------------- | :------------ |
| invalid | <code>boolean</code> | false |
| message | <code>boolean</code> | false |
| messageText | <code>string</code> | "" |
| legendText | <code>string</code> | "" |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## FormItem
### Import path
```js
import { FormItem } from "carbon-components-svelte";
```
### Props
No exported props.
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## FormLabel
### Import path
```js
import { FormLabel } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------ | :------------ |
| id | <code>string</code> | -- |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## Grid
### Import path
```js
import { Grid } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :------------ | :------------------- | :------------ |
| as | <code>boolean</code> | false |
| condensed | <code>boolean</code> | false |
| narrow | <code>boolean</code> | false |
| fullWidth | <code>boolean</code> | false |
| noGutter | <code>boolean</code> | false |
| noGutterLeft | <code>boolean</code> | false |
| noGutterRight | <code>boolean</code> | false |
### Slots
- `<slot>...</slot>`
### Forwarded events
No forwarded events.
### Dispatched events
No dispatched events.
---
## Header
### Import path
```js
import { Header } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :---------------- | :----------------------------------------- | :------------ |
| expandedByDefault | <code>boolean</code> | true |
| isSideNavOpen | <code>boolean</code> | false |
| uiShellAriaLabel | <code>string</code> | -- |
| href | <code>string</code> | -- |
| company | <code>string</code> | -- |
| platformName | <code>string</code> | -- |
| ref | <code>null &#124; HTMLAnchorElement</code> | null |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
### Dispatched events
No dispatched events.
---
## HeaderAction
### Import path
```js
import { HeaderAction } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :-------------------------------------------------------------------------------------------------- | :------------ |
| isOpen | <code>boolean</code> | false |
| icon | <code>{ render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }</code> | -- |
| text | <code>string</code> | -- |
| ref | <code>null &#124; HTMLButtonElement</code> | null |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
### Dispatched events
- `on:close`
---
## HeaderActionLink
### Import path
```js
import { HeaderActionLink } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :----------- | :-------------------------------------------------------------------------------------------------- | :------------ |
| linkIsActive | <code>boolean</code> | false |
| href | <code>string</code> | -- |
| icon | <code>{ render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }</code> | -- |
| ref | <code>null &#124; HTMLAnchorElement</code> | null |
### Slots
No slots.
### Forwarded events
No forwarded events.
### Dispatched events
No dispatched events.
---
## HeaderActionSearch
### Import path
```js
import { HeaderActionSearch } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :------------- | :------------------- | :------------ |
| searchIsActive | <code>boolean</code> | false |
### Slots
No slots.
### Forwarded events
No forwarded events.
### Dispatched events
- `on:focusInputSearch`
- `on:focusOutInputSearch`
- `on:inputSearch`
---
## HeaderGlobalAction
### Import path
```js
import { HeaderGlobalAction } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------------------------------------------------------ | :------------ |
| isActive | <code>boolean</code> | false |
| icon | <code>typeof import("carbon-icons-svelte/lib/Add16").default</code> | -- |
| ref | <code>null &#124; HTMLButtonElement</code> | null |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
### Dispatched events
No dispatched events.
---
## HeaderNav
### Import path
```js
import { HeaderNav } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------ | :------------ |
| ariaLabel | <code>string</code> | -- |
### Slots
- `<slot>...</slot>`
### Forwarded events
No forwarded events.
### Dispatched events
No dispatched events.
---
## HeaderNavItem
### Import path
```js
import { HeaderNavItem } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :----------------------------------------- | :------------ |
| href | <code>string</code> | -- |
| text | <code>string</code> | -- |
| ref | <code>null &#124; HTMLAnchorElement</code> | null |
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
- `on:keyup`
- `on:keydown`
- `on:focus`
- `on:blur`
### Dispatched events
No dispatched events.
---
## HeaderNavMenu
### Import path
```js
import { HeaderNavMenu } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------------- | :----------------------------------------- | :---------------- |
| expanded | <code>boolean</code> | false |
| href | <code>string</code> | "/" |
| text | <code>string</code> | -- |
| ref | <code>null &#124; HTMLAnchorElement</code> | null |
| iconDescription | <code>string</code> | "Expand/Collapse" |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:keydown`
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
- `on:keyup`
- `on:focus`
- `on:blur`
### Dispatched events
No dispatched events.
---
## HeaderPanelDivider
### Import path
```js
import { HeaderPanelDivider } from "carbon-components-svelte";
```
### Props
No exported props.
### Slots
- `<slot>...</slot>`
### Forwarded events
No forwarded events.
### Dispatched events
No dispatched events.
---
## HeaderPanelLink
### Import path
```js
import { HeaderPanelLink } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :----------------------------------------- | :------------ |
| href | <code>string</code> | -- |
| ref | <code>null &#124; HTMLAnchorElement</code> | null |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
### Dispatched events
No dispatched events.
---
## HeaderPanelLinks
### Import path
```js
import { HeaderPanelLinks } from "carbon-components-svelte";
```
### Props
No exported props.
### Slots
- `<slot>...</slot>`
### Forwarded events
No forwarded events.
### Dispatched events
No dispatched events.
---
## HeaderUtilities
### Import path
```js
import { HeaderUtilities } from "carbon-components-svelte";
```
### Props
No exported props.
### Slots
- `<slot>...</slot>`
### Forwarded events
No forwarded events.
### Dispatched events
No dispatched events.
---
## Icon
### Import path
```js
import { Icon } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------------------------------------------------------ | :------------ |
| render | <code>typeof import("carbon-icons-svelte/lib/Add16").default</code> | -- |
| skeleton | <code>boolean</code> | false |
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## IconSkeleton
### Import path
```js
import { IconSkeleton } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------ | :------------ |
| size | <code>number</code> | 16 |
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## InlineLoading
### Import path
```js
import { InlineLoading } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------------- | :----------------------------------------------------------------------- | :------------ |
| status | <code>"active" &#124; "inactive" &#124; "finished" &#124; "error"</code> | "active" |
| description | <code>string</code> | -- |
| iconDescription | <code>string</code> | -- |
| successDelay | <code>number</code> | 1500 |
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
- `on:success`
---
## InlineNotification
### Import path
```js
import { InlineNotification } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :--------------- | :------------------------------------------------------------------------------------------------------------- | :-------------------- |
| notificationType | <code>"toast" &#124; "inline"</code> | "inline" |
| kind | <code>"error" &#124; "info" &#124; "info-square" &#124; "success" &#124; "warning" &#124; "warning-alt"</code> | "error" |
| lowContrast | <code>boolean</code> | false |
| timeout | <code>number</code> | 0 |
| role | <code>string</code> | "alert" |
| title | <code>string</code> | "Title" |
| subtitle | <code>string</code> | "" |
| hideCloseButton | <code>boolean</code> | false |
| iconDescription | <code>string</code> | "Closes notification" |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
- `on:close`
---
## Link
### Import path
```js
import { Link } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :--------------------------------------------------------------------- | :------------ |
| inline | <code>boolean</code> | false |
| disabled | <code>boolean</code> | false |
| visited | <code>boolean</code> | false |
| ref | <code>null &#124; HTMLAnchorElement &#124; HTMLParagraphElement</code> | null |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## ListBox
### Import path
```js
import { ListBox } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :---------- | :------------------------------------- | :------------ |
| size | <code>"sm" &#124; "xl"</code> | -- |
| type | <code>"default" &#124; "inline"</code> | "default" |
| open | <code>boolean</code> | false |
| light | <code>boolean</code> | false |
| disabled | <code>boolean</code> | false |
| invalid | <code>boolean</code> | false |
| invalidText | <code>string</code> | "" |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:keydown`
- `on:click`
### Dispatched events
No dispatched events.
---
## ListBoxField
### Import path
```js
import { ListBoxField } from "carbon-components-svelte";
```
### Props
```ts
// `ListBoxField` type definitions
type ListBoxFieldTranslationId = "close" | "open";
```
| Prop name | Type | Default value |
| :-------------------------- | :----------------------------------------------------- | :------------------------------- |
| disabled | <code>boolean</code> | false |
| role | <code>string</code> | "combobox" |
| tabindex | <code>string</code> | "-1" |
| translationIds (`constant`) | <code>{ close: "close"; open: "open"; }</code> | { close: "close", open: "open" } |
| translateWithId | <code>(id: ListBoxFieldTranslationId) => string</code> | -- |
| id | <code>string</code> | -- |
| ref | <code>null &#124; HTMLElement</code> | null |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
- `on:keydown`
- `on:blur`
### Dispatched events
No dispatched events.
---
## ListBoxMenu
### Import path
```js
import { ListBoxMenu } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------ | :------------ |
| id | <code>string</code> | -- |
### Slots
- `<slot>...</slot>`
### Forwarded events
No forwarded events.
### Dispatched events
No dispatched events.
---
## ListBoxMenuIcon
### Import path
```js
import { ListBoxMenuIcon } from "carbon-components-svelte";
```
### Props
```ts
// `ListBoxMenuIcon` type definitions
type ListBoxMenuIconTranslationId = "close" | "open";
```
| Prop name | Type | Default value |
| :-------------------------- | :-------------------------------------------------------- | :------------------------------- |
| open | <code>boolean</code> | false |
| translationIds (`constant`) | <code>{ close: "close"; open: "open" }</code> | { close: "close", open: "open" } |
| translateWithId | <code>(id: ListBoxMenuIconTranslationId) => string</code> | -- |
### Slots
No slots.
### Forwarded events
- `on:click`
### Dispatched events
No dispatched events.
---
## ListBoxMenuItem
### Import path
```js
import { ListBoxMenuItem } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :---------- | :------------------- | :------------ |
| active | <code>boolean</code> | false |
| highlighted | <code>boolean</code> | false |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## ListBoxSelection
### Import path
```js
import { ListBoxSelection } from "carbon-components-svelte";
```
### Props
```ts
// `ListBoxSelection` type definitions
type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";
```
| Prop name | Type | Default value |
| :-------------------------- | :---------------------------------------------------------------------- | :---------------------------------------------------------- |
| selectionCount | <code>any</code> | -- |
| disabled | <code>boolean</code> | false |
| translationIds (`constant`) | <code>{ clearAll: "clearAll"; clearSelection: "clearSelection" }</code> | { clearAll: "clearAll", clearSelection: "clearSelection", } |
| translateWithId | <code>(id: ListBoxSelectionTranslationId) => string</code> | -- |
| ref | <code>null &#124; HTMLElement</code> | null |
### Slots
No slots.
### Forwarded events
No forwarded events.
### Dispatched events
- `on:clear`
---
## ListItem
### Import path
```js
import { ListItem } from "carbon-components-svelte";
```
### Props
No exported props.
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## Loading
### Import path
```js
import { Loading } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :---------- | :------------------- | :------------------------- |
| small | <code>boolean</code> | false |
| active | <code>boolean</code> | true |
| withOverlay | <code>boolean</code> | true |
| description | <code>string</code> | "Active loading indicator" |
| id | <code>string</code> | -- |
### Slots
No slots.
### Forwarded events
No forwarded events.
### Dispatched events
No dispatched events.
---
## Modal
### Import path
```js
import { Modal } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :------------------------- | :---------------------------------------- | :--------------------------- |
| size | <code>"xs" &#124; "sm" &#124; "lg"</code> | -- |
| open | <code>boolean</code> | false |
| danger | <code>boolean</code> | false |
| alert | <code>boolean</code> | false |
| passiveModal | <code>boolean</code> | false |
| modalHeading | <code>string</code> | -- |
| modalLabel | <code>string</code> | -- |
| modalAriaLabel | <code>string</code> | -- |
| iconDescription | <code>string</code> | "Close the modal" |
| hasForm | <code>boolean</code> | false |
| hasScrollingContent | <code>boolean</code> | false |
| primaryButtonText | <code>string</code> | "" |
| primaryButtonDisabled | <code>boolean</code> | false |
| shouldSubmitOnEnter | <code>boolean</code> | true |
| secondaryButtonText | <code>string</code> | "" |
| selectorPrimaryFocus | <code>string</code> | "[data-modal-primary-focus]" |
| preventCloseOnClickOutside | <code>boolean</code> | false |
| id | <code>string</code> | -- |
| ref | <code>null &#124; HTMLElement</code> | null |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:keydown`
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
- `on:submit`
- `on:click:button--secondary`
- `on:close`
- `on:open`
---
## ModalBody
### Import path
```js
import { ModalBody } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :------------------ | :------------------- | :------------ |
| hasForm | <code>boolean</code> | false |
| hasScrollingContent | <code>boolean</code> | false |
### Slots
- `<slot>...</slot>`
### Forwarded events
No forwarded events.
### Dispatched events
No dispatched events.
---
## ModalFooter
### Import path
```js
import { ModalFooter } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------------------- | :------------------- | :------------ |
| primaryButtonText | <code>string</code> | "" |
| primaryButtonDisabled | <code>boolean</code> | false |
| primaryClass | <code>string</code> | -- |
| secondaryButtonText | <code>string</code> | "" |
| secondaryClass | <code>string</code> | -- |
| danger | <code>boolean</code> | false |
### Slots
- `<slot>...</slot>`
### Forwarded events
No forwarded events.
### Dispatched events
No dispatched events.
---
## ModalHeader
### Import path
```js
import { ModalHeader } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------------- | :------------------ | :------------ |
| title | <code>string</code> | "" |
| label | <code>string</code> | "" |
| labelClass | <code>string</code> | "" |
| titleClass | <code>string</code> | "" |
| closeClass | <code>string</code> | "" |
| closeIconClass | <code>string</code> | "" |
| iconDescription | <code>string</code> | "Close" |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
### Dispatched events
No dispatched events.
---
## MultiSelect
### Import path
```js
import { MultiSelect } from "carbon-components-svelte";
```
### Props
```ts
// `MultiSelect` type definitions
type MultiSelectItemId = string;
type MultiSelectItemText = string;
interface MultiSelectItem {
id: MultiSelectItemId;
text: MultiSelectItemText;
}
```
| Prop name | Type | Default value |
| :---------------- | :----------------------------------------------------------------------- | :----------------- |
| items | <code>MultiSelectItem[]</code> | -- |
| itemToString | <code>(item: MultiSelectItem) => string</code> | -- |
| selectedIds | <code>MultiSelectItemId[]</code> | -- |
| value | <code>string</code> | "" |
| size | <code>"sm" &#124; "lg" &#124; "xl"</code> | -- |
| type | <code>"default" &#124; "inline"</code> | "default" |
| selectionFeedback | <code>"top" &#124; "fixed" &#124; "top-after-reopen"</code> | "top-after-reopen" |
| disabled | <code>boolean</code> | false |
| filterable | <code>boolean</code> | false |
| filterItem | <code>(item: MultiSelectItem, value: string) => string</code> | -- |
| open | <code>boolean</code> | false |
| light | <code>boolean</code> | false |
| locale | <code>string</code> | "en" |
| placeholder | <code>string</code> | "" |
| sortItem | <code>(a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem</code> | -- |
| translateWithId | <code>(id: any) => string</code> | -- |
| titleText | <code>string</code> | "" |
| useTitleInItem | <code>boolean</code> | false |
| invalid | <code>boolean</code> | false |
| invalidText | <code>string</code> | "" |
| helperText | <code>string</code> | "" |
| label | <code>string</code> | "" |
| id | <code>string</code> | -- |
| name | <code>string</code> | -- |
### Slots
No slots.
### Forwarded events
- `on:keydown`
- `on:focus`
- `on:blur`
### Dispatched events
No dispatched events.
---
## NotificationActionButton
### Import path
```js
import { NotificationActionButton } from "carbon-components-svelte";
```
### Props
No exported props.
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## NotificationButton
### Import path
```js
import { NotificationButton } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :--------------- | :------------------------------------------------------------------ | :------------ |
| notificationType | <code>"toast" &#124; "inline"</code> | "toast" |
| renderIcon | <code>typeof import("carbon-icons-svelte/lib/Add16").default</code> | -- |
| title | <code>string</code> | -- |
| iconDescription | <code>string</code> | "Close icon" |
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## NotificationIcon
### Import path
```js
import { NotificationIcon } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :--------------- | :------------------------------------------------------------------------------------------------------------- | :-------------------- |
| kind | <code>"error" &#124; "info" &#124; "info-square" &#124; "success" &#124; "warning" &#124; "warning-alt"</code> | "error" |
| notificationType | <code>"toast" &#124; "inline"</code> | "toast" |
| iconDescription | <code>string</code> | "Closes notification" |
### Slots
No slots.
### Forwarded events
No forwarded events.
### Dispatched events
No dispatched events.
---
## NotificationTextDetails
### Import path
```js
import { NotificationTextDetails } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :--------------- | :----------------------------------- | :------------ |
| notificationType | <code>"toast" &#124; "inline"</code> | "toast" |
| title | <code>string</code> | "Title" |
| subtitle | <code>string</code> | "" |
| caption | <code>string</code> | "Caption" |
### Slots
- `<slot>...</slot>`
### Forwarded events
No forwarded events.
### Dispatched events
No dispatched events.
---
## NumberInput
### Import path
```js
import { NumberInput } from "carbon-components-svelte";
```
### Props
```ts
// `NumberInput` type definitions
type NumberInputTranslationId = "increment" | "decrement";
```
| Prop name | Type | Default value |
| :-------------------------- | :-------------------------------------------------------------- | :-------------------------------------------------- |
| size | <code>"sm" &#124; "xl"</code> | -- |
| value | <code>string</code> | "" |
| step | <code>number</code> | 1 |
| max | <code>number</code> | -- |
| min | <code>number</code> | -- |
| light | <code>boolean</code> | false |
| readonly | <code>boolean</code> | false |
| mobile | <code>boolean</code> | false |
| allowEmpty | <code>boolean</code> | false |
| disabled | <code>boolean</code> | false |
| iconDescription | <code>string</code> | "" |
| invalid | <code>boolean</code> | false |
| invalidText | <code>string</code> | "" |
| helperText | <code>string</code> | "" |
| label | <code>string</code> | "" |
| hideLabel | <code>boolean</code> | false |
| translateWithId | <code>(id: NumberInputTranslationId) => string</code> | -- |
| translationIds (`constant`) | <code>{ increment: "increment"; decrement: "decrement" }</code> | { increment: "increment", decrement: "decrement", } |
| id | <code>string</code> | -- |
| name | <code>string</code> | -- |
| ref | <code>null &#124; HTMLInputElement</code> | null |
### Slots
- `<slot name="label">...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
- `on:input`
### Dispatched events
- `on:change`
---
## NumberInputSkeleton
### Import path
```js
import { NumberInputSkeleton } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------- | :------------ |
| hideLabel | <code>boolean</code> | false |
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## OrderedList
### Import path
```js
import { OrderedList } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------- | :------------ |
| nested | <code>boolean</code> | false |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## OverflowMenu
### Import path
```js
import { OverflowMenu } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :--------------- | :------------------------------------------------------------------ | :------------------------------- |
| direction | <code>"top" &#124; "bottom"</code> | "bottom" |
| open | <code>boolean</code> | false |
| light | <code>boolean</code> | false |
| flipped | <code>boolean</code> | false |
| menuOptionsClass | <code>string</code> | -- |
| icon | <code>typeof import("carbon-icons-svelte/lib/Add16").default</code> | -- |
| iconClass | <code>string</code> | -- |
| iconDescription | <code>string</code> | "Open and close list of options" |
| id | <code>string</code> | -- |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
- `on:keydown`
### Dispatched events
- `on:close`
---
## OverflowMenuItem
### Import path
```js
import { OverflowMenuItem } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :----------- | :------------------------------------------------------------------ | :------------- |
| text | <code>string</code> | "Provide text" |
| href | <code>string</code> | "" |
| primaryFocus | <code>boolean</code> | false |
| disabled | <code>boolean</code> | false |
| hasDivider | <code>boolean</code> | false |
| danger | <code>boolean</code> | false |
| requireTitle | <code>boolean</code> | true |
| id | <code>string</code> | -- |
| ref | <code>null &#124; HTMLAnchorElement &#124; HTMLButtonElement</code> | null |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:keydown`
### Dispatched events
No dispatched events.
---
## Pagination
### Import path
```js
import { Pagination } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :---------------- | :--------------------------------------------------------------- | :---------------- |
| page | <code>number</code> | 1 |
| totalItems | <code>number</code> | 0 |
| disabled | <code>boolean</code> | false |
| forwardText | <code>string</code> | "Next page" |
| backwardText | <code>string</code> | "Previous page" |
| itemsPerPageText | <code>string</code> | "Items per page:" |
| itemText | <code>(min: number, max: number) => string</code> | -- |
| itemRangeText | <code>(min: number, max: number, total: number) => string</code> | -- |
| pageInputDisabled | <code>boolean</code> | false |
| pageSize | <code>number</code> | 10 |
| pageSizes | <code>number[]</code> | -- |
| pagesUnknown | <code>boolean</code> | false |
| pageText | <code>(page: number) => string</code> | -- |
| pageRangeText | <code>(current: number, total: number) => string</code> | -- |
| id | <code>string</code> | -- |
### Slots
No slots.
### Forwarded events
No forwarded events.
### Dispatched events
- `on:update`
---
## PaginationNav
### Import path
```js
import { PaginationNav } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :----------- | :------------------- | :-------------- |
| page | <code>number</code> | 0 |
| total | <code>number</code> | 10 |
| shown | <code>number</code> | 10 |
| loop | <code>boolean</code> | false |
| forwardText | <code>string</code> | "Next page" |
| backwardText | <code>string</code> | "Previous page" |
### Slots
No slots.
### Forwarded events
No forwarded events.
### Dispatched events
- `on:click:button--previous`
- `on:click:button--next`
- `on:change`
---
## PaginationSkeleton
### Import path
```js
import { PaginationSkeleton } from "carbon-components-svelte";
```
### Props
No exported props.
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## PasswordInput
### Import path
```js
import { PasswordInput } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :---------------- | :-------------------------------------------------------------- | :-------------- |
| size | <code>"sm" &#124; "xl"</code> | -- |
| value | <code>string</code> | "" |
| type | <code>string</code> | "password" |
| placeholder | <code>string</code> | "" |
| hidePasswordLabel | <code>string</code> | "Hide password" |
| showPasswordLabel | <code>string</code> | "Show password" |
| tooltipAlignment | <code>"start" &#124; "center" &#124; "end"</code> | -- |
| tooltipPosition | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | -- |
| light | <code>boolean</code> | false |
| disabled | <code>boolean</code> | false |
| helperText | <code>string</code> | "" |
| labelText | <code>string</code> | "" |
| hideLabel | <code>boolean</code> | false |
| invalid | <code>boolean</code> | false |
| invalidText | <code>string</code> | "" |
| id | <code>string</code> | -- |
| name | <code>string</code> | -- |
| ref | <code>null &#124; HTMLInputElement</code> | null |
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
- `on:change`
- `on:input`
- `on:keydown`
- `on:focus`
- `on:blur`
### Dispatched events
No dispatched events.
---
## ProgressIndicator
### Import path
```js
import { ProgressIndicator } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :----------- | :------------------- | :------------ |
| currentIndex | <code>number</code> | 0 |
| vertical | <code>boolean</code> | false |
| spaceEqually | <code>boolean</code> | false |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
- `on:change`
---
## ProgressIndicatorSkeleton
### Import path
```js
import { ProgressIndicatorSkeleton } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------- | :------------ |
| vertical | <code>boolean</code> | false |
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## ProgressStep
### Import path
```js
import { ProgressStep } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :------------- | :------------------- | :------------ |
| complete | <code>boolean</code> | false |
| current | <code>boolean</code> | false |
| disabled | <code>boolean</code> | false |
| invalid | <code>boolean</code> | false |
| description | <code>string</code> | "" |
| label | <code>string</code> | "" |
| secondaryLabel | <code>string</code> | "" |
| id | <code>string</code> | -- |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
- `on:keydown`
### Dispatched events
No dispatched events.
---
## RadioButton
### Import path
```js
import { RadioButton } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :------------ | :---------------------------------------- | :------------ |
| value | <code>string</code> | "" |
| checked | <code>boolean</code> | false |
| disabled | <code>boolean</code> | false |
| labelPosition | <code>"right" &#124; "left"</code> | "right" |
| labelText | <code>string</code> | "" |
| hideLabel | <code>boolean</code> | false |
| id | <code>string</code> | -- |
| name | <code>string</code> | "" |
| ref | <code>null &#124; HTMLInputElement</code> | null |
### Slots
No slots.
### Forwarded events
- `on:change`
### Dispatched events
No dispatched events.
---
## RadioButtonGroup
### Import path
```js
import { RadioButtonGroup } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :------------ | :------------------------------------------ | :------------ |
| selected | <code>string</code> | -- |
| disabled | <code>boolean</code> | false |
| labelPosition | <code>"right" &#124; "left"</code> | "right" |
| orientation | <code>"horizontal" &#124; "vertical"</code> | "horizontal" |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
- `on:change`
---
## RadioButtonSkeleton
### Import path
```js
import { RadioButtonSkeleton } from "carbon-components-svelte";
```
### Props
No exported props.
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## RadioTile
### Import path
```js
import { RadioTile } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------------- | :------------------- | :--------------- |
| checked | <code>boolean</code> | false |
| light | <code>boolean</code> | false |
| value | <code>string</code> | "" |
| tabindex | <code>string</code> | "0" |
| iconDescription | <code>string</code> | "Tile checkmark" |
| id | <code>string</code> | -- |
| name | <code>string</code> | "" |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:change`
- `on:keydown`
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## Row
### Import path
```js
import { Row } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :------------ | :------------------- | :------------ |
| as | <code>boolean</code> | false |
| condensed | <code>boolean</code> | false |
| narrow | <code>boolean</code> | false |
| noGutter | <code>boolean</code> | false |
| noGutterLeft | <code>boolean</code> | false |
| noGutterRight | <code>boolean</code> | false |
### Slots
- `<slot>...</slot>`
### Forwarded events
No forwarded events.
### Dispatched events
No dispatched events.
---
## Search
### Import path
```js
import { Search } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :------------------- | :---------------------------------------- | :------------------- |
| small | <code>boolean</code> | false |
| size | <code>"sm" &#124; "lg"</code> | -- |
| skeleton | <code>boolean</code> | false |
| light | <code>boolean</code> | false |
| value | <code>string</code> | "" |
| type | <code>string</code> | "text" |
| placeholder | <code>string</code> | "Search..." |
| autocomplete | <code>"on" &#124; "off"</code> | "off" |
| autofocus | <code>boolean</code> | false |
| closeButtonLabelText | <code>string</code> | "Clear search input" |
| labelText | <code>string</code> | "" |
| id | <code>string</code> | -- |
| ref | <code>null &#124; HTMLInputElement</code> | null |
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
- `on:change`
- `on:input`
### Dispatched events
No dispatched events.
---
## SearchSkeleton
### Import path
```js
import { SearchSkeleton } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------- | :------------ |
| small | <code>boolean</code> | false |
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## Select
### Import path
```js
import { Select } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :---------- | :----------------------------------------- | :------------ |
| selected | <code>string</code> | -- |
| size | <code>"sm" &#124; "xl"</code> | -- |
| inline | <code>boolean</code> | false |
| light | <code>boolean</code> | false |
| disabled | <code>boolean</code> | false |
| id | <code>string</code> | -- |
| name | <code>string</code> | -- |
| invalid | <code>boolean</code> | false |
| invalidText | <code>string</code> | "" |
| helperText | <code>string</code> | "" |
| noLabel | <code>boolean</code> | false |
| labelText | <code>string</code> | "" |
| hideLabel | <code>boolean</code> | false |
| ref | <code>null &#124; HTMLSelectElement</code> | null |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:blur`
### Dispatched events
- `on:change`
---
## SelectItem
### Import path
```js
import { SelectItem } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------- | :------------ |
| value | <code>string</code> | "" |
| text | <code>string</code> | "" |
| hidden | <code>boolean</code> | false |
| disabled | <code>boolean</code> | false |
### Slots
No slots.
### Forwarded events
No forwarded events.
### Dispatched events
No dispatched events.
---
## SelectItemGroup
### Import path
```js
import { SelectItemGroup } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------- | :-------------- |
| disabled | <code>boolean</code> | false |
| label | <code>string</code> | "Provide label" |
### Slots
- `<slot>...</slot>`
### Forwarded events
No forwarded events.
### Dispatched events
No dispatched events.
---
## SelectSkeleton
### Import path
```js
import { SelectSkeleton } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------- | :------------ |
| hideLabel | <code>boolean</code> | false |
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## SelectableTile
### Import path
```js
import { SelectableTile } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------------- | :---------------------------------------- | :--------------- |
| selected | <code>boolean</code> | false |
| light | <code>boolean</code> | false |
| title | <code>string</code> | "title" |
| value | <code>string</code> | "value" |
| tabindex | <code>string</code> | "0" |
| iconDescription | <code>string</code> | "Tile checkmark" |
| id | <code>string</code> | -- |
| name | <code>string</code> | "" |
| ref | <code>null &#124; HTMLInputElement</code> | null |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
- `on:keydown`
### Dispatched events
No dispatched events.
---
## SideNav
### Import path
```js
import { SideNav } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------- | :------------ |
| fixed | <code>boolean</code> | false |
| ariaLabel | <code>string</code> | -- |
| isOpen | <code>boolean</code> | false |
### Slots
- `<slot>...</slot>`
### Forwarded events
No forwarded events.
### Dispatched events
No dispatched events.
---
## SideNavItems
### Import path
```js
import { SideNavItems } from "carbon-components-svelte";
```
### Props
No exported props.
### Slots
- `<slot>...</slot>`
### Forwarded events
No forwarded events.
### Dispatched events
No dispatched events.
---
## SideNavLink
### Import path
```js
import { SideNavLink } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :--------- | :-------------------------------------------------------------------------------------------------- | :------------ |
| isSelected | <code>boolean</code> | false |
| href | <code>string</code> | -- |
| text | <code>string</code> | -- |
| icon | <code>{ render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }</code> | -- |
| ref | <code>null &#124; HTMLAnchorElement</code> | null |
### Slots
No slots.
### Forwarded events
- `on:click`
### Dispatched events
No dispatched events.
---
## SideNavMenu
### Import path
```js
import { SideNavMenu } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :-------------------------------------------------------------------------------------------------- | :------------ |
| expanded | <code>boolean</code> | false |
| text | <code>string</code> | -- |
| icon | <code>{ render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }</code> | -- |
| ref | <code>null &#124; HTMLButtonElement</code> | null |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
### Dispatched events
No dispatched events.
---
## SideNavMenuItem
### Import path
```js
import { SideNavMenuItem } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :--------- | :----------------------------------------- | :------------ |
| isSelected | <code>boolean</code> | -- |
| href | <code>string</code> | -- |
| text | <code>string</code> | -- |
| ref | <code>null &#124; HTMLAnchorElement</code> | null |
### Slots
No slots.
### Forwarded events
- `on:click`
### Dispatched events
No dispatched events.
---
## SkeletonPlaceholder
### Import path
```js
import { SkeletonPlaceholder } from "carbon-components-svelte";
```
### Props
No exported props.
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## SkeletonText
### Import path
```js
import { SkeletonText } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------- | :------------ |
| lines | <code>number</code> | 3 |
| heading | <code>boolean</code> | false |
| paragraph | <code>boolean</code> | false |
| width | <code>string</code> | "100%" |
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## SkipToContent
### Import path
```js
import { SkipToContent } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------ | :-------------- |
| href | <code>string</code> | "#main-content" |
| tabindex | <code>string</code> | "0" |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
### Dispatched events
No dispatched events.
---
## Slider
### Import path
```js
import { Slider } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :------------- | :----------------------------------- | :------------ |
| value | <code>number</code> | 0 |
| max | <code>number</code> | 100 |
| maxLabel | <code>string</code> | "" |
| min | <code>number</code> | 0 |
| minLabel | <code>string</code> | "" |
| step | <code>number</code> | 1 |
| stepMultiplier | <code>number</code> | 4 |
| required | <code>boolean</code> | false |
| inputType | <code>string</code> | "number" |
| disabled | <code>boolean</code> | false |
| light | <code>boolean</code> | false |
| hideTextInput | <code>boolean</code> | false |
| id | <code>string</code> | -- |
| invalid | <code>boolean</code> | false |
| labelText | <code>string</code> | "" |
| name | <code>string</code> | "" |
| ref | <code>null &#124; HTMLElement</code> | null |
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
- `on:change`
---
## SliderSkeleton
### Import path
```js
import { SliderSkeleton } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------- | :------------ |
| hideLabel | <code>boolean</code> | false |
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## StructuredList
### Import path
```js
import { StructuredList } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------- | :------------ |
| selected | <code>string</code> | -- |
| border | <code>boolean</code> | false |
| selection | <code>boolean</code> | false |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
- `on:change`
---
## StructuredListBody
### Import path
```js
import { StructuredListBody } from "carbon-components-svelte";
```
### Props
No exported props.
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## StructuredListCell
### Import path
```js
import { StructuredListCell } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------- | :------------ |
| head | <code>boolean</code> | false |
| noWrap | <code>boolean</code> | false |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## StructuredListHead
### Import path
```js
import { StructuredListHead } from "carbon-components-svelte";
```
### Props
No exported props.
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## StructuredListInput
### Import path
```js
import { StructuredListInput } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :---------------------------------------- | :------------ |
| checked | <code>boolean</code> | false |
| title | <code>string</code> | "title" |
| value | <code>string</code> | "value" |
| id | <code>string</code> | -- |
| name | <code>string</code> | "" |
| ref | <code>null &#124; HTMLInputElement</code> | null |
### Slots
No slots.
### Forwarded events
No forwarded events.
### Dispatched events
No dispatched events.
---
## StructuredListRow
### Import path
```js
import { StructuredListRow } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------- | :------------ |
| head | <code>boolean</code> | false |
| label | <code>boolean</code> | false |
| tabindex | <code>string</code> | "0" |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
- `on:keydown`
### Dispatched events
No dispatched events.
---
## StructuredListSkeleton
### Import path
```js
import { StructuredListSkeleton } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------- | :------------ |
| rows | <code>number</code> | 5 |
| border | <code>boolean</code> | false |
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## Switch
### Import path
```js
import { Switch } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :----------------------------------------- | :------------- |
| text | <code>string</code> | "Provide text" |
| selected | <code>boolean</code> | false |
| disabled | <code>boolean</code> | false |
| id | <code>string</code> | -- |
| ref | <code>null &#124; HTMLButtonElement</code> | null |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
- `on:keydown`
### Dispatched events
No dispatched events.
---
## Tab
### Import path
```js
import { Tab } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :----------------------------------------- | :------------ |
| label | <code>string</code> | "" |
| href | <code>string</code> | "#" |
| disabled | <code>boolean</code> | false |
| tabindex | <code>string</code> | "0" |
| id | <code>string</code> | -- |
| ref | <code>null &#124; HTMLAnchorElement</code> | null |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## TabContent
### Import path
```js
import { TabContent } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------ | :------------ |
| id | <code>string</code> | -- |
### Slots
- `<slot>...</slot>`
### Forwarded events
No forwarded events.
### Dispatched events
No dispatched events.
---
## Table
### Import path
```js
import { Table } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :--------------- | :-------------------------------------------------- | :------------ |
| size | <code>"compact" &#124; "short" &#124; "tall"</code> | -- |
| zebra | <code>boolean</code> | false |
| useStaticWidth | <code>boolean</code> | false |
| shouldShowBorder | <code>boolean</code> | false |
| sortable | <code>boolean</code> | false |
| stickyHeader | <code>boolean</code> | false |
### Slots
- `<slot>...</slot>`
### Forwarded events
No forwarded events.
### Dispatched events
No dispatched events.
---
## TableBody
### Import path
```js
import { TableBody } from "carbon-components-svelte";
```
### Props
No exported props.
### Slots
- `<slot>...</slot>`
### Forwarded events
No forwarded events.
### Dispatched events
No dispatched events.
---
## TableCell
### Import path
```js
import { TableCell } from "carbon-components-svelte";
```
### Props
No exported props.
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## TableContainer
### Import path
```js
import { TableContainer } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :----------- | :------------------- | :------------ |
| title | <code>string</code> | "" |
| description | <code>string</code> | "" |
| stickyHeader | <code>boolean</code> | false |
### Slots
- `<slot>...</slot>`
### Forwarded events
No forwarded events.
### Dispatched events
No dispatched events.
---
## TableHead
### Import path
```js
import { TableHead } from "carbon-components-svelte";
```
### Props
No exported props.
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## TableHeader
### Import path
```js
import { TableHeader } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------------- | :------------------------ | :------------ |
| scope | <code>string</code> | "col" |
| translateWithId | <code>() => string</code> | -- |
| id | <code>string</code> | -- |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
- `on:click`
### Dispatched events
No dispatched events.
---
## TableRow
### Import path
```js
import { TableRow } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :--------- | :------------------- | :------------ |
| isSelected | <code>boolean</code> | false |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## Tabs
### Import path
```js
import { Tabs } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------------- | :---------------------------------------- | :------------------ |
| selected | <code>number</code> | 0 |
| type | <code>"default" &#124; "container"</code> | "default" |
| iconDescription | <code>string</code> | "Show menu options" |
| triggerHref | <code>string</code> | "#" |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:keypress`
- `on:click`
### Dispatched events
- `on:change`
---
## TabsSkeleton
### Import path
```js
import { TabsSkeleton } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------ | :------------ |
| count | <code>number</code> | 4 |
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## Tag
### Import path
```js
import { Tag } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------- |
| type | <code>"red" &#124; "magenta" &#124; "purple" &#124; "blue" &#124; "cyan" &#124; "teal" &#124; "green" &#124; "gray" &#124; "cool-gray" &#124; "warm-gray" &#124; "high-contrast"</code> | -- |
| filter | <code>boolean</code> | false |
| disabled | <code>boolean</code> | false |
| skeleton | <code>boolean</code> | false |
| title | <code>string</code> | "Clear filter" |
| id | <code>string</code> | -- |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## TagSkeleton
### Import path
```js
import { TagSkeleton } from "carbon-components-svelte";
```
### Props
No exported props.
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## TextArea
### Import path
```js
import { TextArea } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :---------- | :------------------------------------------- | :------------ |
| value | <code>string</code> | "" |
| placeholder | <code>string</code> | "" |
| cols | <code>number</code> | 50 |
| rows | <code>number</code> | 4 |
| light | <code>boolean</code> | false |
| disabled | <code>boolean</code> | false |
| helperText | <code>string</code> | "" |
| labelText | <code>string</code> | "" |
| hideLabel | <code>boolean</code> | false |
| invalid | <code>boolean</code> | false |
| invalidText | <code>string</code> | "" |
| id | <code>string</code> | -- |
| name | <code>string</code> | -- |
| ref | <code>null &#124; HTMLTextAreaElement</code> | null |
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
- `on:change`
- `on:input`
- `on:focus`
- `on:blur`
### Dispatched events
No dispatched events.
---
## TextAreaSkeleton
### Import path
```js
import { TextAreaSkeleton } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------- | :------------ |
| hideLabel | <code>boolean</code> | false |
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## TextInput
### Import path
```js
import { TextInput } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :---------- | :---------------------------------------- | :------------ |
| size | <code>"sm" &#124; "xl"</code> | -- |
| value | <code>string</code> | "" |
| type | <code>string</code> | "" |
| placeholder | <code>string</code> | "" |
| light | <code>boolean</code> | false |
| disabled | <code>boolean</code> | false |
| helperText | <code>string</code> | "" |
| id | <code>string</code> | -- |
| name | <code>string</code> | -- |
| labelText | <code>string</code> | "" |
| hideLabel | <code>boolean</code> | false |
| invalid | <code>boolean</code> | false |
| invalidText | <code>string</code> | "" |
| warn | <code>boolean</code> | false |
| warnText | <code>string</code> | "" |
| ref | <code>null &#124; HTMLInputElement</code> | null |
| required | <code>boolean</code> | false |
| inline | <code>boolean</code> | false |
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
- `on:change`
- `on:input`
- `on:keydown`
- `on:focus`
- `on:blur`
### Dispatched events
No dispatched events.
---
## TextInputSkeleton
### Import path
```js
import { TextInputSkeleton } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------- | :------------ |
| hideLabel | <code>boolean</code> | false |
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## Tile
### Import path
```js
import { Tile } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------- | :------------ |
| light | <code>boolean</code> | false |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## TileGroup
### Import path
```js
import { TileGroup } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------- | :------------ |
| selected | <code>string</code> | -- |
| disabled | <code>boolean</code> | false |
| legend | <code>string</code> | "" |
### Slots
- `<slot>...</slot>`
### Forwarded events
No forwarded events.
### Dispatched events
- `on:select`
---
## TimePicker
### Import path
```js
import { TimePicker } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :---------- | :---------------------------------------- | :------------ |
| value | <code>string</code> | "" |
| type | <code>string</code> | "text" |
| placeholder | <code>string</code> | "hh=mm" |
| pattern | <code>string</code> | "(1[012] | [1-9]):[0-5][0-9](\\s)?" |
| maxlength | <code>number</code> | 5 |
| light | <code>boolean</code> | false |
| disabled | <code>boolean</code> | false |
| labelText | <code>string</code> | "" |
| hideLabel | <code>boolean</code> | false |
| invalid | <code>boolean</code> | false |
| invalidText | <code>string</code> | "" |
| id | <code>string</code> | -- |
| name | <code>string</code> | -- |
| ref | <code>null &#124; HTMLInputElement</code> | null |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
- `on:change`
- `on:input`
- `on:focus`
- `on:blur`
### Dispatched events
No dispatched events.
---
## TimePickerSelect
### Import path
```js
import { TimePickerSelect } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------------- | :----------------------------------------- | :--------------------- |
| value | <code>string</code> | "" |
| disabled | <code>boolean</code> | false |
| iconDescription | <code>string</code> | "Open list of options" |
| labelText | <code>string</code> | "" |
| hideLabel | <code>boolean</code> | true |
| id | <code>string</code> | -- |
| name | <code>string</code> | -- |
| ref | <code>null &#124; HTMLSelectElement</code> | null |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## ToastNotification
### Import path
```js
import { ToastNotification } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :--------------- | :------------------------------------------------------------------------------------------------------------- | :-------------------- |
| notificationType | <code>"toast" &#124; "inline"</code> | "toast" |
| kind | <code>"error" &#124; "info" &#124; "info-square" &#124; "success" &#124; "warning" &#124; "warning-alt"</code> | "error" |
| lowContrast | <code>boolean</code> | false |
| timeout | <code>number</code> | 0 |
| role | <code>string</code> | "alert" |
| title | <code>string</code> | "Title" |
| subtitle | <code>string</code> | "" |
| caption | <code>string</code> | "Caption" |
| iconDescription | <code>string</code> | "Closes notification" |
| hideCloseButton | <code>boolean</code> | false |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
- `on:close`
---
## Toggle
### Import path
```js
import { Toggle } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------- | :------------ |
| toggled | <code>boolean</code> | false |
| disabled | <code>boolean</code> | false |
| labelA | <code>string</code> | "Off" |
| labelB | <code>string</code> | "On" |
| labelText | <code>string</code> | "" |
| id | <code>string</code> | -- |
| name | <code>string</code> | -- |
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
- `on:change`
- `on:keyup`
- `on:focus`
- `on:blur`
### Dispatched events
No dispatched events.
---
## ToggleSkeleton
### Import path
```js
import { ToggleSkeleton } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------ | :------------ |
| labelText | <code>string</code> | "" |
| id | <code>string</code> | -- |
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## ToggleSmall
### Import path
```js
import { ToggleSmall } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------- | :------------ |
| toggled | <code>boolean</code> | false |
| disabled | <code>boolean</code> | false |
| labelA | <code>string</code> | "Off" |
| labelB | <code>string</code> | "On" |
| labelText | <code>string</code> | "" |
| id | <code>string</code> | -- |
| name | <code>string</code> | -- |
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
- `on:change`
- `on:keyup`
- `on:focus`
- `on:blur`
### Dispatched events
No dispatched events.
---
## ToggleSmallSkeleton
### Import path
```js
import { ToggleSmallSkeleton } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------ | :------------ |
| labelText | <code>string</code> | "" |
| id | <code>string</code> | -- |
### Slots
No slots.
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
## Tooltip
### Import path
```js
import { Tooltip } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------------- | :------------------------------------------------------------------ | :------------ |
| direction | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | "bottom" |
| open | <code>boolean</code> | false |
| hideIcon | <code>boolean</code> | false |
| icon | <code>typeof import("carbon-icons-svelte/lib/Add16").default</code> | -- |
| iconDescription | <code>string</code> | "" |
| iconName | <code>string</code> | "" |
| tabindex | <code>string</code> | "0" |
| tooltipId | <code>string</code> | -- |
| triggerId | <code>string</code> | -- |
| triggerText | <code>string</code> | "" |
| ref | <code>null &#124; HTMLElement</code> | null |
| refTooltip | <code>null &#124; HTMLElement</code> | null |
| refIcon | <code>null &#124; HTMLElement</code> | null |
### Slots
- `<slot>...</slot>`
### Forwarded events
No forwarded events.
### Dispatched events
No dispatched events.
---
## TooltipDefinition
### Import path
```js
import { TooltipDefinition } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :---------- | :------------------------------------------------ | :------------ |
| tooltipText | <code>string</code> | "" |
| align | <code>"start" &#124; "center" &#124; "end"</code> | "center" |
| direction | <code>"top" &#124; "bottom"</code> | "bottom" |
| id | <code>string</code> | -- |
| ref | <code>null &#124; HTMLButtonElement</code> | null |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
- `on:focus`
### Dispatched events
No dispatched events.
---
## TooltipIcon
### Import path
```js
import { TooltipIcon } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :---------- | :-------------------------------------------------------------- | :------------ |
| tooltipText | <code>string</code> | "" |
| align | <code>"start" &#124; "center" &#124; "end"</code> | "center" |
| direction | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | "bottom" |
| id | <code>string</code> | -- |
| ref | <code>null &#124; HTMLButtonElement</code> | null |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
- `on:focus`
### Dispatched events
No dispatched events.
---
## UnorderedList
### Import path
```js
import { UnorderedList } from "carbon-components-svelte";
```
### Props
| Prop name | Type | Default value |
| :-------- | :------------------- | :------------ |
| nested | <code>boolean</code> | false |
### Slots
- `<slot>...</slot>`
### Forwarded events
- `on:click`
- `on:mouseover`
- `on:mouseenter`
- `on:mouseleave`
### Dispatched events
No dispatched events.
---
Reference in a new issue View git blame Copy permalink