carbon-components-svelte/COMPONENT_INDEX.md

Component Index

154 components exported from carbon-components-svelte@0.23.2.

Components

• Accordion
• AccordionItem
• AccordionSkeleton
• AspectRatio
• Breadcrumb
• BreadcrumbItem
• BreadcrumbSkeleton
• Button
• ButtonSet
• ButtonSkeleton
• Checkbox
• CheckboxSkeleton
• ClickableTile
• CodeSnippet
• CodeSnippetSkeleton
• Column
• ComboBox
• ComposedModal
• Content
• ContentSwitcher
• Copy
• CopyButton
• DataTable
• DataTableSkeleton
• DatePicker
• DatePickerInput
• DatePickerSkeleton
• Dropdown
• DropdownSkeleton
• ExpandableTile
• FileUploader
• FileUploaderButton
• FileUploaderDropContainer
• FileUploaderItem
• FileUploaderSkeleton
• Filename
• FluidForm
• Form
• FormGroup
• FormItem
• FormLabel
• Grid
• Header
• HeaderAction
• HeaderActionLink
• HeaderActionSearch
• HeaderGlobalAction
• HeaderNav
• HeaderNavItem
• HeaderNavMenu
• HeaderPanelDivider
• HeaderPanelLink
• HeaderPanelLinks
• HeaderUtilities
• Icon
• IconSkeleton
• InlineLoading
• InlineNotification
• Link
• ListBox
• ListBoxField
• ListBoxMenu
• ListBoxMenuIcon
• ListBoxMenuItem
• ListBoxSelection
• ListItem
• Loading
• Modal
• ModalBody
• ModalFooter
• ModalHeader
• MultiSelect
• NotificationActionButton
• NotificationButton
• NotificationIcon
• NotificationTextDetails
• NumberInput
• NumberInputSkeleton
• OrderedList
• OverflowMenu
• OverflowMenuItem
• Pagination
• PaginationNav
• PaginationSkeleton
• PasswordInput
• ProgressIndicator
• ProgressIndicatorSkeleton
• ProgressStep
• RadioButton
• RadioButtonGroup
• RadioButtonSkeleton
• RadioTile
• Row
• Search
• SearchSkeleton
• Select
• SelectItem
• SelectItemGroup
• SelectSkeleton
• SelectableTile
• SideNav
• SideNavItems
• SideNavLink
• SideNavMenu
• SideNavMenuItem
• SkeletonPlaceholder
• SkeletonText
• SkipToContent
• Slider
• SliderSkeleton
• StructuredList
• StructuredListBody
• StructuredListCell
• StructuredListHead
• StructuredListInput
• StructuredListRow
• StructuredListSkeleton
• Switch
• Tab
• TabContent
• Table
• TableBody
• TableCell
• TableContainer
• TableHead
• TableHeader
• TableRow
• Tabs
• TabsSkeleton
• Tag
• TagSkeleton
• TextArea
• TextAreaSkeleton
• TextInput
• TextInputSkeleton
• Tile
• TileGroup
• TimePicker
• TimePickerSelect
• ToastNotification
• Toggle
• ToggleSkeleton
• ToggleSmall
• ToggleSmallSkeleton
• Toolbar
• ToolbarBatchActions
• ToolbarContent
• ToolbarMenu
• ToolbarMenuItem
• ToolbarSearch
• Tooltip
• TooltipDefinition
• TooltipIcon
• UnorderedList

---

Accordion

Props

Prop name	Kind	Reactive	Type	Default value	Description
align	let	No	"start" | "end"	"end"	Specify alignment of accordion item chevron icon
size	let	No	"sm" | "xl"	--	Specify the size of the accordion
disabled	let	No	boolean	false	Set to true to disable the accordion
skeleton	let	No	boolean	false	Set to true to display the skeleton state

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

AccordionItem

Props

Prop name	Kind	Reactive	Type	Default value	Description
disabled	let	Yes	boolean	false	Set to true to disable the accordion item
open	let	Yes	boolean	false	Set to true to open the first accordion item
title	let	No	string	"title"	Specify the title of the accordion item heading Alternatively, use the named slot "title" (e.g. <div slot="title">...</div>)
iconDescription	let	No	string	"Expand/Collapse"	Specify the ARIA label for the accordion item chevron icon

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--
title	No	--	{title}

Events

Event name	Type	Detail
animationend	forwarded	--
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
keydown	forwarded	--

AccordionSkeleton

Props

Prop name	Kind	Reactive	Type	Default value	Description
count	let	No	number	4	Specify the number of accordion items to render
align	let	No	"start" | "end"	"end"	Specify alignment of accordion item chevron icon
size	let	No	"sm" | "xl"	--	Specify the size of the accordion
open	let	No	boolean	true	Set to false to close the first accordion item

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

AspectRatio

Props

Prop name	Kind	Reactive	Type	Default value	Description
ratio	let	No	"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2"	"2x1"	Specify the aspect ratio

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

Breadcrumb

Props

Prop name	Kind	Reactive	Type	Default value	Description
noTrailingSlash	let	No	boolean	false	Set to true to hide the breadcrumb trailing slash
skeleton	let	No	boolean	false	Set to true to display skeleton state

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

BreadcrumbItem

Props

Prop name	Kind	Reactive	Type	Default value	Description
href	let	No	string	--	Set the href to use an anchor link
isCurrentPage	let	No	boolean	false	Set to true if the breadcrumb item represents the current page

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

BreadcrumbSkeleton

Props

Prop name	Kind	Reactive	Type	Default value	Description
noTrailingSlash	let	No	boolean	false	Set to true to hide the breadcrumb trailing slash
count	let	No	number	3	Specify the number of breadcrumb items to render

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

Button

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLAnchorElement | HTMLButtonElement	null	Obtain a reference to the HTML element
kind	let	No	"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger-tertiary" | "danger-ghost"	"primary"	Specify the kind of button
size	let	No	"default" | "field" | "small"	"default"	Specify the size of button
hasIconOnly	let	No	boolean	false	Set to true for the icon-only variant
icon	let	No	typeof import("carbon-icons-svelte").CarbonIcon	--	Specify the icon from carbon-icons-svelte to render
iconDescription	let	No	string	--	Specify the ARIA label for the button icon
tooltipAlignment	let	No	"start" | "center" | "end"	--	Set the alignment of the tooltip relative to the icon hasIconOnly must be set to true
tooltipPosition	let	No	"top" | "right" | "bottom" | "left"	--	Set the position of the tooltip relative to the icon
as	let	No	boolean	false	Set to true to render a custom HTML element Props are destructured as props in the default slot (e.g. <Button let:props><div {...props}>...</div></Button>)
skeleton	let	No	boolean	false	Set to true to display the skeleton state
disabled	let	No	boolean	false	Set to true to disable the button
href	let	No	string	--	Set the href to use an anchor link
tabindex	let	No	string	"0"	Specify the tabindex
type	let	No	string	"button"	Specify the type attribute for the button element

Slots

Slot name	Default	Props	Fallback
--	Yes	{ props: { role: "button"; type?: string; tabindex: any; disabled: boolean; href?: string; class: string; [key: string]: any; } }	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

ButtonSet

Props

Prop name	Kind	Reactive	Type	Default value	Description
stacked	let	No	boolean	false	Set to true to stack the buttons vertically

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

ButtonSkeleton

Props

Prop name	Kind	Reactive	Type	Default value	Description
href	let	No	string	--	Set the href to use an anchor link
size	let	No	"default" | "field" | "small"	"default"	Specify the size of button skeleton
small	let	No	boolean	false	Set to true to use the small variant

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

Checkbox

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLInputElement	null	Obtain a reference to the input HTML element
checked	let	Yes	boolean	false	Specify whether the checkbox is checked
indeterminate	let	No	boolean	false	Specify whether the checkbox is indeterminate
skeleton	let	No	boolean	false	Set to true to display the skeleton state
readonly	let	No	boolean	false	Set to true for the checkbox to be read-only
disabled	let	No	boolean	false	Set to true to disable the checkbox
labelText	let	No	string	""	Specify the label text
hideLabel	let	No	boolean	false	Set to true to visually hide the label text
name	let	No	string	""	Set a name for the input element
title	let	No	string	--	Specify the title attribute for the label element
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the input label

Slots

None.

Events

Event name	Type	Detail
check	dispatched	boolean
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
change	forwarded	--

CheckboxSkeleton

Props

None.

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

ClickableTile

Props

Prop name	Kind	Reactive	Type	Default value	Description
clicked	let	Yes	boolean	false	Set to true to click the tile
light	let	No	boolean	false	Set to true to enable the light variant
href	let	No	string	--	Set the href

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
keydown	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

CodeSnippet

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLPreElement	null	Obtain a reference to the pre HTML element
showMoreLess	let	Yes	boolean	false	Set to true to enable the show more/less button
expanded	let	Yes	boolean	false	Set to true to expand a multi-line code snippet (type="multi")
type	let	No	"single" | "inline" | "multi"	"single"	Set the type of code snippet
code	let	No	string	--	Set the code snippet text Alternatively, use the default slot (e.g. <CodeSnippet>{code}</CodeSnippet>)
hideCopyButton	let	No	boolean	false	Set to true to hide the copy button
wrapText	let	No	boolean	false	Set to true to wrap the text Note that type must be "multi"
light	let	No	boolean	false	Set to true to enable the light variant
skeleton	let	No	boolean	false	Set to true to display the skeleton state
copyButtonDescription	let	No	string	--	Specify the ARIA label for the copy button icon
copyLabel	let	No	string	--	Specify the ARIA label of the copy button
feedback	let	No	string	"Copied!"	Specify the feedback text displayed when clicking the snippet
feedbackTimeout	let	No	number	2000	Set the timeout duration (ms) to display feedback text
showLessText	let	No	string	"Show less"	Specify the show less text type must be "multi"
showMoreText	let	No	string	"Show more"	Specify the show more text type must be "multi"
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the code element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	{code}

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
animationend	forwarded	--

CodeSnippetSkeleton

Props

Prop name	Kind	Reactive	Type	Default value	Description
type	let	No	"single" | "inline" | "multi"	"single"	Set the type of code snippet

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

Column

Types

export type ColumnSize = boolean | number;

export interface ColumnSizeDescriptor {
  span?: ColumnSize;
  offset: number;
}

export type ColumnBreakpoint = ColumnSize | ColumnSizeDescriptor;

Props

Prop name	Kind	Reactive	Type	Default value	Description
as	let	No	boolean	false	Set to true to render a custom HTML element Props are destructured as props in the default slot (e.g. <Column let:props><article {...props}>...</article></Column>)
noGutter	let	No	boolean	false	Set to true to remove the gutter
noGutterLeft	let	No	boolean	false	Set to true to remove the left gutter
noGutterRight	let	No	boolean	false	Set to true to remove the right gutter
aspectRatio	let	No	"2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1"	--	Specify the aspect ratio of the column
sm	let	No	ColumnBreakpoint	--	Set the small breakpoint
md	let	No	ColumnBreakpoint	--	Set the medium breakpoint
lg	let	No	ColumnBreakpoint	--	Set the large breakpoint
xlg	let	No	ColumnBreakpoint	--	Set the extra large breakpoint
max	let	No	ColumnBreakpoint	--	Set the maximum breakpoint

Slots

Slot name	Default	Props	Fallback
--	Yes	{props: { class: string; [key: string]: any; }}	--

Events

None.

ComboBox

Types

export interface ComboBoxItem {
  id: string;
  text: string;
}

Props

Prop name	Kind	Reactive	Type	Default value	Description
listRef	let	Yes	null | HTMLDivElement	null	Obtain a reference to the list HTML element
ref	let	Yes	null | HTMLInputElement	null	Obtain a reference to the input HTML element
open	let	Yes	boolean	false	Set to true to open the combobox menu dropdown
value	let	Yes	string	""	Specify the selected combobox value
selectedIndex	let	Yes	number	-1	Set the selected item by value index
items	let	No	ComboBoxItem[]	[]	Set the combobox items
itemToString	let	No	(item: ComboBoxItem) => string	(item) => item.text || item.id	Override the display of a combobox item
size	let	No	"sm" | "xl"	--	Set the size of the combobox
disabled	let	No	boolean	false	Set to true to disable the combobox
titleText	let	No	string	""	Specify the title text of the combobox
placeholder	let	No	string	""	Specify the placeholder text
helperText	let	No	string	""	Specify the helper text
invalidText	let	No	string	""	Specify the invalid state text
invalid	let	No	boolean	false	Set to true to indicate an invalid state
light	let	No	boolean	false	Set to true to enable the light variant
shouldFilterItem	let	No	(item: ComboBoxItem, value: string) => boolean	() => true	Determine if an item should be filtered given the current combobox value
translateWithId	let	No	(id: any) => string	--	Override the default translation ids
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the list box component
name	let	No	string	--	Specify a name attribute for the input

Slots

None.

Events

Event name	Type	Detail
select	dispatched	{ selectedId: string; selectedIndex: number; selectedItem: ComboBoxItem }
keydown	forwarded	--
focus	forwarded	--
blur	forwarded	--
clear	forwarded	--
scroll	forwarded	--

ComposedModal

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLDivElement	null	Obtain a reference to the top-level HTML element
open	let	Yes	boolean	false	Set to true to open the modal
size	let	No	"xs" | "sm" | "lg"	--	Set the size of the composed modal
danger	let	No	boolean	false	Set to true to use the danger variant
preventCloseOnClickOutside	let	No	boolean	false	Set to true to prevent the modal from closing when clicking outside
containerClass	let	No	string	""	Specify a class for the inner modal
selectorPrimaryFocus	let	No	null | string	"[data-modal-primary-focus]"	Specify a selector to be focused when opening the modal

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
transitionend	forwarded	--
submit	dispatched	--
close	dispatched	--
open	dispatched	--

Content

Props

Prop name	Kind	Reactive	Type	Default value	Description
id	let	No	string	"main-content"	Specify the id for the main element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

ContentSwitcher

Props

Prop name	Kind	Reactive	Type	Default value	Description
selectedIndex	let	Yes	number	0	Set the selected index of the switch item
light	let	No	boolean	false	Set to true to enable the light variant
size	let	No	"sm" | "xl"	--	Specify the size of the content switcher

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
change	dispatched	number
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

Copy

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLButtonElement	null	Obtain a reference to the button HTML element
feedback	let	No	string	"Copied!"	Set the feedback text shown after clicking the button
feedbackTimeout	let	No	number	2000	Set the timeout duration (ms) to display feedback text

Slots

Slot name	Default	Props	Fallback
--	Yes	--	{#if animation}{feedback || $$restProps['aria-label']}{/if}

Events

Event name	Type	Detail
click	forwarded	--
animationend	forwarded	--

CopyButton

Props

Prop name	Kind	Reactive	Type	Default value	Description
iconDescription	let	No	string	"Copy to clipboard"	Set the title and ARIA label for the copy button

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
animationend	forwarded	--

DataTable

Types

export type DataTableKey = string;

export type DataTableValue = any;

export interface DataTableEmptyHeader {
  key: DataTableKey;
  empty: boolean;
  display?: (item: Value) => DataTableValue;
  sort?: (a: DataTableValue, b: DataTableValue) => 0 | -1 | 1;
  columnMenu?: boolean;
}

export interface DataTableNonEmptyHeader {
  key: DataTableKey;
  value: DataTableValue;
  display?: (item: Value) => DataTableValue;
  sort?: (a: DataTableValue, b: DataTableValue) => 0 | -1 | 1;
  columnMenu?: boolean;
}

export type DataTableHeader = DataTableNonEmptyHeader | DataTableEmptyHeader;

export type DataTableRow = Record<DataTableKey, DataTableValue>;

export type DataTableRowId = string;

export interface DataTableCell {
  key: DataTableKey;
  value: DataTableValue;
}

Props

Prop name	Kind	Reactive	Type	Default value	Description
selectedRowIds	let	Yes	DataTableRowId[]	[]	Specify the row ids to be selected
selectable	let	Yes	boolean	false	Set to true for the selectable variant Automatically set to true if radio or batchSelection are true
expandedRowIds	let	Yes	DataTableRowId[]	[]	Specify the row ids to be expanded
expandable	let	Yes	boolean	false	Set to true for the expandable variant Automatically set to true if batchExpansion is true
rows	let	Yes	DataTableRow[]	[]	Specify the rows the data table should render keys defined in headers are used for the row ids
headers	let	No	DataTableHeader[]	[]	Specify the data table headers
size	let	No	"compact" | "short" | "tall"	--	Set the size of the data table
title	let	No	string	""	Specify the title of the data table
description	let	No	string	""	Specify the description of the data table
zebra	let	No	boolean	false	Set to true to use zebra styles
sortable	let	No	boolean	false	Set to true for the sortable variant
batchExpansion	let	No	boolean	false	Set to true to enable batch expansion
radio	let	No	boolean	false	Set to true for the radio selection variant
batchSelection	let	No	boolean	false	Set to true to enable batch selection
stickyHeader	let	No	boolean	false	Set to true to enable a sticky header

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--
cell	No	{ row: DataTableRow; cell: DataTableCell; }	{headers[j].display ? headers[j].display(cell.value) : cell.value}
cell-header	No	{ header: DataTableNonEmptyHeader; }	{header.value}
expanded-row	No	{ row: DataTableRow; }	--

Events

Event name	Type	Detail
click	dispatched	{ header?: DataTableHeader; row?: DataTableRow; cell?: DataTableCell; }
click:header--expand	dispatched	{ expanded: boolean; }
click:header	dispatched	{ header: DataTableHeader; sortDirection: "ascending" | "descending" | "none" }
click:row	dispatched	DataTableRow
mouseenter:row	dispatched	DataTableRow
mouseleave:row	dispatched	DataTableRow
click:row--expand	dispatched	{ expanded: boolean; row: DataTableRow; }
click:cell	dispatched	DataTableCell

DataTableSkeleton

Props

Prop name	Kind	Reactive	Type	Default value	Description
columns	let	No	number	5	Specify the number of columns
rows	let	No	number	5	Specify the number of rows
size	let	No	"compact" | "short" | "tall"	--	Set the size of the data table
zebra	let	No	boolean	false	Set to true to apply zebra styles to the datatable rows
showHeader	let	No	boolean	true	Set to false to hide the header
headers	let	No	string[]	[]	Set the column headers If headers has one more items, count is ignored
showToolbar	let	No	boolean	true	Set to false to hide the toolbar

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

DatePicker

Props

Prop name	Kind	Reactive	Type	Default value	Description
value	let	Yes	number | string	""	Specify the date picker input value
datePickerType	let	No	"simple" | "single" | "range"	"simple"	Specify the date picker type
appendTo	let	No	HTMLElement	--	Specify the element to append the calendar to
dateFormat	let	No	string	"m/d/Y"	Specify the date format
maxDate	let	No	null | string | Date	null	Specify the maximum date
minDate	let	No	null | string | Date	null	Specify the minimum date
locale	let	No	string	"en"	Specify the locale
short	let	No	boolean	false	Set to true to use the short variant
light	let	No	boolean	false	Set to true to enable the light variant
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the date picker element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
change	dispatched	--

DatePickerInput

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLInputElement	null	Obtain a reference to the input HTML element
size	let	No	"sm" | "xl"	--	Set the size of the input
type	let	No	string	"text"	Specify the input type
placeholder	let	No	string	""	Specify the input placeholder text
pattern	let	No	string	"\d{1,2}\/\d{1,2}\/\d{4}"	Specify the Regular Expression for the input value
disabled	let	No	boolean	false	Set to true to disable the input
iconDescription	let	No	string	""	Specify the ARIA label for the calendar icon
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the input element
labelText	let	No	string	""	Specify the label text
hideLabel	let	No	boolean	false	Set to true to visually hide the label text
invalid	let	No	boolean	false	Set to true to indicate an invalid state
invalidText	let	No	string	""	Specify the invalid state text
name	let	No	string	--	Set a name for the input element

Slots

None.

Events

Event name	Type	Detail
input	forwarded	--
keydown	forwarded	--
blur	forwarded	--

DatePickerSkeleton

Props

Prop name	Kind	Reactive	Type	Default value	Description
range	let	No	boolean	false	Set to true to use the range variant
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id to be used by the label element

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

Dropdown

Types

export type DropdownItemId = string;

export type DropdownItemText = string;

export interface DropdownItem {
  id: DropdownItemId;
  text: DropdownItemText;
}

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLButtonElement	null	Obtain a reference to the button HTML element
inline	let	Yes	boolean	false	Set to true to use the inline variant
open	let	Yes	boolean	false	Set to true to open the dropdown
selectedIndex	let	Yes	number	-1	Specify the selected item index
items	let	No	DropdownItem[]	[]	Set the dropdown items
itemToString	let	No	(item: DropdownItem) => string	(item) => item.text || item.id	Override the display of a dropdown item
type	let	No	"default" | "inline"	"default"	Specify the type of dropdown
size	let	No	"sm" | "lg" | "xl"	--	Specify the size of the dropdown field
light	let	No	boolean	false	Set to true to enable the light variant
disabled	let	No	boolean	false	Set to true to disable the dropdown
titleText	let	No	string	""	Specify the title text
invalid	let	No	boolean	false	Set to true to indicate an invalid state
invalidText	let	No	string	""	Specify the invalid state text
helperText	let	No	string	""	Specify the helper text
label	let	No	string	--	Specify the list box label
translateWithId	let	No	(id: any) => string	--	Override the default translation ids
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the list box component
name	let	No	string	--	Specify a name attribute for the list box

Slots

None.

Events

Event name	Type	Detail
select	dispatched	{ selectedId: DropdownItemId, selectedIndex: number, selectedItem: DropdownItem }

DropdownSkeleton

Props

Prop name	Kind	Reactive	Type	Default value	Description
inline	let	No	boolean	false	Set to true to use the inline variant

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

ExpandableTile

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLDivElement	null	Obtain a reference to the top-level element
tilePadding	let	Yes	number	0	Specify the padding of the tile (number of pixels)
tileMaxHeight	let	Yes	number	0	Specify the max height of the tile (number of pixels)
expanded	let	Yes	boolean	false	Set to true to expand the tile
light	let	No	boolean	false	Set to true to enable the light variant
tileCollapsedIconText	let	No	string	"Interact to expand Tile"	Specify the icon text of the collapsed tile
tileExpandedIconText	let	No	string	"Interact to collapse Tile"	Specify the icon text of the expanded tile
tabindex	let	No	string	"0"	Specify the tabindex
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the top-level div element

Slots

Slot name	Default	Props	Fallback
above	No	--	--
below	No	--	--

Events

Event name	Type	Detail
click	forwarded	--
keypress	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

FileUploader

Types

export type Files = string[];

Props

Prop name	Kind	Reactive	Type	Default value	Description
files	let	Yes	Files	[]	Obtain the uploaded file names
status	let	No	"uploading" | "edit" | "complete"	"uploading"	Specify the file uploader status
accept	let	No	Files	[]	Specify the accepted file types
multiple	let	No	boolean	false	Set to true to allow multiple files
clearFiles	const	No	() => void	() => { files = []; }	Override the default behavior of clearing the array of uploaded files
labelDescription	let	No	string	""	Specify the label description
labelTitle	let	No	string	""	Specify the label title
kind	let	No	"primary" | "secondary" | "tertiary" | "ghost" | "danger"	"primary"	Specify the kind of file uploader button
buttonLabel	let	No	string	""	Specify the button label
iconDescription	let	No	string	"Provide icon description"	Specify the ARIA label used for the status icons
name	let	No	string	""	Specify a name attribute for the file button uploader input

Slots

None.

Events

Event name	Type	Detail
add	dispatched	Files
remove	dispatched	Files
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
change	forwarded	--
keydown	forwarded	--

FileUploaderButton

Types

export type Files = string[];

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLInputElement	null	Obtain a reference to the input HTML element
labelText	let	Yes	string	"Add file"	Specify the label text
accept	let	No	Files	[]	Specify the accepted file types
multiple	let	No	boolean	false	Set to true to allow multiple files
disabled	let	No	boolean	false	Set to true to disable the input
disableLabelChanges	let	No	boolean	false	Set to true to disable label changes
kind	let	No	"primary" | "secondary" | "tertiary" | "ghost" | "danger"	"primary"	Specify the kind of file uploader button
role	let	No	string	"button"	Specify the label role
tabindex	let	No	string	"0"	Specify tabindex attribute
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the input element
name	let	No	string	""	Specify a name attribute for the input

Slots

None.

Events

Event name	Type	Detail
keydown	forwarded	--
change	forwarded	--
click	forwarded	--

FileUploaderDropContainer

Types

export type Files = string[];

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLInputElement	null	Obtain a reference to the input HTML element
accept	let	No	Files	[]	Specify the accepted file types
multiple	let	No	boolean	false	Set to true to allow multiple files
validateFiles	let	No	(files: Files) => Files	(files) => files	Override the default behavior of validating uploaded files The default behavior does not validate files
labelText	let	No	string	"Add file"	Specify the label text
role	let	No	string	"button"	Specify the role attribute of the drop container
disabled	let	No	boolean	false	Set to true to disable the input
tabindex	let	No	string	"0"	Specify tabindex attribute
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the input element
name	let	No	string	""	Specify a name attribute for the input

Slots

None.

Events

Event name	Type	Detail
add	dispatched	Files
dragover	forwarded	--
dragleave	forwarded	--
drop	forwarded	--
keydown	forwarded	--
change	forwarded	--
click	forwarded	--

FileUploaderItem

Props

Prop name	Kind	Reactive	Type	Default value	Description
status	let	No	"uploading" | "edit" | "complete"	"uploading"	Specify the file uploader status
iconDescription	let	No	string	""	Specify the ARIA label used for the status icons
invalid	let	No	boolean	false	Set to true to indicate an invalid state
errorSubject	let	No	string	""	Specify the error subject text
errorBody	let	No	string	""	Specify the error body text
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the top-level element
name	let	No	string	""	Specify the file uploader name

Slots

None.

Events

Event name	Type	Detail
delete	dispatched	string
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

FileUploaderSkeleton

Props

None.

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

Filename

Props

Prop name	Kind	Reactive	Type	Default value	Description
status	let	No	"uploading" | "edit" | "complete"	"uploading"	Specify the file name status
iconDescription	let	No	string	""	Specify the ARIA label used for the status icons
invalid	let	No	boolean	false	Set to true to indicate an invalid state

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
keydown	forwarded	--

FluidForm

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

Form

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
submit	forwarded	--

FormGroup

Props

Prop name	Kind	Reactive	Type	Default value	Description
invalid	let	No	boolean	false	Set to true to indicate an invalid state
message	let	No	boolean	false	Set to true to render a form requirement
messageText	let	No	string	""	Specify the message text
legendText	let	No	string	""	Specify the legend text

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

FormItem

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

FormLabel

Props

Prop name	Kind	Reactive	Type	Default value	Description
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id to be used by the label element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

Grid

Props

Prop name	Kind	Reactive	Type	Default value	Description
as	let	No	boolean	false	Set to true to render a custom HTML element Props are destructured as props in the default slot (e.g. <Grid let:props><header {...props}>...</header></Grid>)
condensed	let	No	boolean	false	Set to true to use the condensed variant
narrow	let	No	boolean	false	Set to true to use the narrow variant
fullWidth	let	No	boolean	false	Set to true to use the fullWidth variant
noGutter	let	No	boolean	false	Set to true to remove the gutter
noGutterLeft	let	No	boolean	false	Set to true to remove the left gutter
noGutterRight	let	No	boolean	false	Set to true to remove the right gutter

Slots

Slot name	Default	Props	Fallback
--	Yes	{ props: { class: string; [key: string]: any; } }	--

Events

None.

Header

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLAnchorElement	null	Obtain a reference to the HTML anchor element
isSideNavOpen	let	Yes	boolean	false	Set to true to open the side nav
expandedByDefault	let	No	boolean	true	Set to false to hide the side nav by default
uiShellAriaLabel	let	No	string	--	Specify the ARIA label for the header
href	let	No	string	--	Specify the href attribute
company	let	No	string	--	Specify the company name
platformName	let	No	string	""	Specify the platform name Alternatively, use the named slot "platform" (e.g. <span slot="platform">...</span>)
persistentHamburgerMenu	let	No	boolean	false	Set to true to persist the hamburger menu

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--
platform	No	--	{platformName}
skip-to-content	No	--	--

Events

Event name	Type	Detail
click	forwarded	--

HeaderAction

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLButtonElement	null	Obtain a reference to the button HTML element
isOpen	let	Yes	boolean	false	Set to true to open the panel
icon	let	No	{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }	--	Specify the icon props
text	let	No	string	--	Specify the text Alternatively, use the named slot "text" (e.g. <div slot="text">...</div>)

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--
text	No	--	{#if text}<span>{text}</span>{/if}

Events

Event name	Type	Detail
click	forwarded	--
close	dispatched	--

HeaderActionLink

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLAnchorElement	null	Obtain a reference to the HTML anchor element
linkIsActive	let	No	boolean	false	Set to true to use the active state
href	let	No	string	--	Specify the href attribute
icon	let	No	{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }	--	Specify the icon props

Slots

None.

Events

None.

HeaderActionSearch

Props

Prop name	Kind	Reactive	Type	Default value	Description
searchIsActive	let	Yes	boolean	false	Set to true to focus the search

Slots

None.

Events

Event name	Type	Detail
inputSearch	dispatched	{ action: "search"; textInput: string; }
focusInputSearch	dispatched	--
focusOutInputSearch	dispatched	--

HeaderGlobalAction

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLButtonElement	null	Obtain a reference to the HTML button element
isActive	let	No	boolean	false	Set to true to use the active variant
icon	let	No	typeof import("carbon-icons-svelte").CarbonIcon	--	Specify the icon to render

Slots

Slot name	Default	Props	Fallback
--	Yes	--	<svelte:component this="{icon}" />

Events

Event name	Type	Detail
click	forwarded	--

HeaderNav

Props

Prop name	Kind	Reactive	Type	Default value	Description
ariaLabel	let	No	string	--	Specify the ARIA label for the nav

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

HeaderNavItem

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLAnchorElement	null	Obtain a reference to the HTML anchor element
href	let	No	string	--	Specify the href attribute
text	let	No	string	--	Specify the text

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
keyup	forwarded	--
keydown	forwarded	--
focus	forwarded	--
blur	forwarded	--

HeaderNavMenu

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLAnchorElement	null	Obtain a reference to the HTML anchor element
expanded	let	Yes	boolean	false	Set to true to toggle the expanded state
href	let	No	string	"/"	Specify the href attribute
text	let	No	string	--	Specify the text
iconDescription	let	No	string	"Expand/Collapse"	Specify the ARIA label for the chevron icon

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
keydown	forwarded	--
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
keyup	forwarded	--
focus	forwarded	--
blur	forwarded	--

HeaderPanelDivider

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

HeaderPanelLink

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLAnchorElement	null	Obtain a reference to the HTML anchor element
href	let	No	string	--	Specify the href attribute

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--

HeaderPanelLinks

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

HeaderUtilities

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

Icon

Props

Prop name	Kind	Reactive	Type	Default value	Description
render	let	No	typeof import("carbon-icons-svelte").CarbonIcon	--	Specify the icon from carbon-icons-svelte to render
skeleton	let	No	boolean	false	Set to true to display the skeleton state

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

IconSkeleton

Props

Prop name	Kind	Reactive	Type	Default value	Description
size	let	No	number	16	Set the size of the icon

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

InlineLoading

Props

Prop name	Kind	Reactive	Type	Default value	Description
status	let	No	"active" | "inactive" | "finished" | "error"	"active"	Set the loading status
description	let	No	string	--	Set the loading description
iconDescription	let	No	string	--	Specify the ARIA label for the loading icon
successDelay	let	No	number	1500	Specify the timeout delay (ms) after status is set to "success"

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
success	dispatched	--

InlineNotification

Props

Prop name	Kind	Reactive	Type	Default value	Description
notificationType	let	No	"toast" | "inline"	"inline"	Set the type of notification
kind	let	No	"error" | "info" | "info-square" | "success" | "warning" | "warning-alt"	"error"	Specify the kind of notification
lowContrast	let	No	boolean	false	Set to true to use the low contrast variant
timeout	let	No	number	0	Set the timeout duration (ms) to hide the notification after opening it
role	let	No	string	"alert"	Set the role attribute
title	let	No	string	"Title"	Specify the title text
subtitle	let	No	string	""	Specify the subtitle text
hideCloseButton	let	No	boolean	false	Set to true to hide the close button
iconDescription	let	No	string	"Closes notification"	Specify the ARIA label for the icon

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--
actions	No	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
close	dispatched	--

Link

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLAnchorElement | HTMLParagraphElement	null	Obtain a reference to the top-level HTML element
size	let	No	"sm" | "lg"	--	Specify the size of the link
href	let	No	string	--	Specify the href value
inline	let	No	boolean	false	Set to true to use the inline variant
disabled	let	No	boolean	false	Set to true to disable the checkbox
visited	let	No	boolean	false	Set to true to allow visited styles

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

ListBox

Props

Prop name	Kind	Reactive	Type	Default value	Description
size	let	No	"sm" | "xl"	--	Set the size of the list box
type	let	No	"default" | "inline"	"default"	Set the type of the list box
open	let	No	boolean	false	Set to true to open the list box
light	let	No	boolean	false	Set to true to enable the light variant
disabled	let	No	boolean	false	Set to true to disable the list box
invalid	let	No	boolean	false	Set to true to indicate an invalid state
invalidText	let	No	string	""	Specify the invalid state text

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
keydown	forwarded	--
click	forwarded	--

ListBoxField

Types

export type ListBoxFieldTranslationId = "close" | "open";

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLDivElement	null	Obtain a reference to the top-level HTML element
disabled	let	No	boolean	false	Set to true to disable the list box field
role	let	No	string	"combobox"	Specify the role attribute
tabindex	let	No	string	"-1"	Specify the tabindex
translationIds	const	No	{ close: "close", open: "open" }	{ close: "close", open: "open" }	Default translation ids
translateWithId	let	No	(id: ListBoxFieldTranslationId) => string	(id) => defaultTranslations[id]	Override the default translation ids
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the top-level element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
keydown	forwarded	--
blur	forwarded	--

ListBoxMenu

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLDivElement	null	Obtain a reference to the HTML element
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the top-level element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
scroll	forwarded	--

ListBoxMenuIcon

Types

export type ListBoxMenuIconTranslationId = "close" | "open";

Props

Prop name	Kind	Reactive	Type	Default value	Description
open	let	No	boolean	false	Set to true to open the list box menu icon
translationIds	const	No	{ close: "close", open: "open" }	{ close: "close", open: "open" }	Default translation ids
translateWithId	let	No	(id: ListBoxMenuIconTranslationId) => string	(id) => defaultTranslations[id]	Override the default translation ids

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--

ListBoxMenuItem

Props

Prop name	Kind	Reactive	Type	Default value	Description
active	let	No	boolean	false	Set to true to enable the active state
highlighted	let	No	boolean	false	Set to true to enable the highlighted state

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

ListBoxSelection

Types

export type ListBoxSelectionTranslationId = "clearAll" | "clearSelection";

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLDivElement	null	Obtain a reference to the top-level HTML element
selectionCount	let	No	any	--	Specify the number of selected items
disabled	let	No	boolean	false	Set to true to disable the list box selection
translationIds	const	No	{ clearAll: "clearAll", clearSelection: "clearSelection", }	{ clearAll: "clearAll", clearSelection: "clearSelection", }	Default translation ids
translateWithId	let	No	(id: ListBoxSelectionTranslationId) => string	(id) => defaultTranslations[id]	Override the default translation ids

Slots

None.

Events

Event name	Type	Detail
clear	dispatched	--

ListItem

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

Loading

Props

Prop name	Kind	Reactive	Type	Default value	Description
small	let	No	boolean	false	Set to true to use the small variant
active	let	No	boolean	true	Set to false to disable the active state
withOverlay	let	No	boolean	true	Set to false to disable the overlay
description	let	No	string	"Active loading indicator"	Specify the label description
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the label element

Slots

None.

Events

None.

Modal

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLDivElement	null	Obtain a reference to the top-level HTML element
open	let	Yes	boolean	false	Set to true to open the modal
size	let	No	"xs" | "sm" | "lg"	--	Set the size of the modal
danger	let	No	boolean	false	Set to true to use the danger variant
alert	let	No	boolean	false	Set to true to enable alert mode
passiveModal	let	No	boolean	false	Set to true to use the passive variant
modalHeading	let	No	string	--	Specify the modal heading
modalLabel	let	No	string	--	Specify the modal label
modalAriaLabel	let	No	string	--	Specify the ARIA label for the modal
iconDescription	let	No	string	"Close the modal"	Specify the ARIA label for the close icon
hasForm	let	No	boolean	false	Set to true if the modal contains form elements
hasScrollingContent	let	No	boolean	false	Set to true if the modal contains scrolling content
primaryButtonText	let	No	string	""	Specify the primary button text
primaryButtonDisabled	let	No	boolean	false	Set to true to disable the primary button
shouldSubmitOnEnter	let	No	boolean	true	Set to true for the primary button to be triggered when pressing "Enter"
secondaryButtonText	let	No	string	""	Specify the secondary button text
selectorPrimaryFocus	let	No	string	"[data-modal-primary-focus]"	Specify a selector to be focused when opening the modal
preventCloseOnClickOutside	let	No	boolean	false	Set to true to prevent the modal from closing when clicking outside
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the top-level element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--
heading	No	--	{modalHeading}
label	No	--	{modalLabel}

Events

Event name	Type	Detail
keydown	forwarded	--
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
submit	dispatched	--
click:button--secondary	dispatched	--
close	dispatched	--
open	dispatched	--

ModalBody

Props

Prop name	Kind	Reactive	Type	Default value	Description
hasForm	let	No	boolean	false	Set to true if the modal contains form elements
hasScrollingContent	let	No	boolean	false	Set to true if the modal contains scrolling content

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

ModalFooter

Props

Prop name	Kind	Reactive	Type	Default value	Description
primaryButtonText	let	No	string	""	Specify the primary button text
primaryButtonDisabled	let	No	boolean	false	Set to true to disable the primary button
primaryClass	let	No	string	--	Specify a class for the primary button
secondaryButtonText	let	No	string	""	Specify the secondary button text
secondaryClass	let	No	string	--	Specify a class for the secondary button
danger	let	No	boolean	false	Set to true to use the danger variant

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

ModalHeader

Props

Prop name	Kind	Reactive	Type	Default value	Description
title	let	No	string	""	Specify the modal title
label	let	No	string	""	Specify the modal label
labelClass	let	No	string	""	Specify the label class
titleClass	let	No	string	""	Specify the title class
closeClass	let	No	string	""	Specify the close class
closeIconClass	let	No	string	""	Specify the close icon class
iconDescription	let	No	string	"Close"	Specify the ARIA label for the close icon

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--

MultiSelect

Types

export type MultiSelectItemId = string;

export type MultiSelectItemText = string;

export interface MultiSelectItem {
  id: MultiSelectItemId;
  text: MultiSelectItemText;
}

Props

Prop name	Kind	Reactive	Type	Default value	Description
open	let	Yes	boolean	false	Set to true to open the dropdown
value	let	Yes	string	""	Specify the multiselect value
selectedIds	let	Yes	MultiSelectItemId[]	[]	Set the selected ids
items	let	Yes	MultiSelectItem[]	[]	Set the multiselect items
itemToString	let	No	(item: MultiSelectItem) => string	(item) => item.text || item.id	Override the display of a multiselect item
size	let	No	"sm" | "lg" | "xl"	--	Set the size of the combobox
type	let	No	"default" | "inline"	"default"	Specify the type of multiselect
selectionFeedback	let	No	"top" | "fixed" | "top-after-reopen"	"top-after-reopen"	Specify the selection feedback after selecting items
disabled	let	No	boolean	false	Set to true to disable the dropdown
filterable	let	No	boolean	false	Set to true to filter items
filterItem	let	No	(item: MultiSelectItem, value: string) => string	(item, value) => item.text.toLowerCase().includes(value.toLowerCase())	Override the filtering logic The default filtering is an exact string comparison
light	let	No	boolean	false	Set to true to enable the light variant
locale	let	No	string	"en"	Specify the locale
placeholder	let	No	string	""	Specify the placeholder text
sortItem	let	No	((a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem) | (() => void)	(a, b) => a.text.localeCompare(b.text, locale, { numeric: true })	Override the sorting logic The default sorting compare the item text value
translateWithId	let	No	(id: any) => string	--	Override the default translation ids
titleText	let	No	string	""	Specify the title text
useTitleInItem	let	No	boolean	false	Set to true to pass the item to itemToString in the checkbox
invalid	let	No	boolean	false	Set to true to indicate an invalid state
invalidText	let	No	string	""	Specify the invalid state text
helperText	let	No	string	""	Specify the helper text
label	let	No	string	""	Specify the list box label
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the list box component
name	let	No	string	--	Specify a name attribute for the select

Slots

None.

Events

Event name	Type	Detail
clear	forwarded	--
keydown	forwarded	--
focus	forwarded	--
blur	forwarded	--
select	dispatched	--

NotificationActionButton

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

NotificationButton

Props

Prop name	Kind	Reactive	Type	Default value	Description
notificationType	let	No	"toast" | "inline"	"toast"	Set the type of notification
renderIcon	let	No	typeof import("carbon-icons-svelte").CarbonIcon	--	Specify the icon from carbon-icons-svelte to render
title	let	No	string	--	Specify the title of the icon
iconDescription	let	No	string	"Close icon"	Specify the ARIA label for the icon

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

NotificationIcon

Props

Prop name	Kind	Reactive	Type	Default value	Description
kind	let	No	"error" | "info" | "info-square" | "success" | "warning" | "warning-alt"	"error"	Specify the kind of notification icon
notificationType	let	No	"toast" | "inline"	"toast"	Set the type of notification
iconDescription	let	No	string	"Closes notification"	Specify the ARIA label for the icon

Slots

None.

Events

None.

NotificationTextDetails

Props

Prop name	Kind	Reactive	Type	Default value	Description
notificationType	let	No	"toast" | "inline"	"toast"	Set the type of notification
title	let	No	string	"Title"	Specify the title text
subtitle	let	No	string	""	Specify the subtitle text
caption	let	No	string	"Caption"	Specify the caption text

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

NumberInput

Types

export type NumberInputTranslationId = "increment" | "decrement";

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLInputElement	null	Obtain a reference to the input HTML element
value	let	Yes	number | string	""	Specify the input value
size	let	No	"sm" | "xl"	--	Set the size of the input
step	let	No	number	1	Specify the step increment
max	let	No	number	--	Specify the maximum value
min	let	No	number	--	Specify the minimum value
light	let	No	boolean	false	Set to true to enable the light variant
readonly	let	No	boolean	false	Set to true for the input to be read-only
mobile	let	No	boolean	false	Set to true to enable the mobile variant
allowEmpty	let	No	boolean	false	Set to true to allow for an empty value
disabled	let	No	boolean	false	Set to true to disable the input
iconDescription	let	No	string	""	Specify the ARIA label for the increment icons
invalid	let	No	boolean	false	Set to true to indicate an invalid state
invalidText	let	No	string	""	Specify the invalid state text
helperText	let	No	string	""	Specify the helper text
label	let	No	string	""	Specify the label text
hideLabel	let	No	boolean	false	Set to true to visually hide the label text
translateWithId	let	No	(id: NumberInputTranslationId) => string	(id) => defaultTranslations[id]	Override the default translation ids
translationIds	const	No	{ increment: "increment"; decrement: "decrement" }	{ increment: "increment", decrement: "decrement", }	Default translation ids
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the input element
name	let	No	string	--	Specify a name attribute for the input

Slots

Slot name	Default	Props	Fallback
label	No	--	{label}

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
input	forwarded	--
change	dispatched	--

NumberInputSkeleton

Props

Prop name	Kind	Reactive	Type	Default value	Description
hideLabel	let	No	boolean	false	Set to true to hide the label text

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

OrderedList

Props

Prop name	Kind	Reactive	Type	Default value	Description
nested	let	No	boolean	false	Set to true to use the nested variant
native	let	No	boolean	false	Set to true to use native list styles

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

OverflowMenu

Props

Prop name	Kind	Reactive	Type	Default value	Description
menuRef	let	Yes	null | HTMLUListElement	null	Obtain a reference to the overflow menu element
buttonRef	let	Yes	null | HTMLButtonElement	null	Obtain a reference to the trigger button element
open	let	Yes	boolean	false	Set to true to open the menu
size	let	No	"sm" | "xl"	--	Specify the size of the overflow menu
direction	let	No	"top" | "bottom"	"bottom"	Specify the direction of the overflow menu relative to the button
light	let	No	boolean	false	Set to true to enable the light variant
flipped	let	No	boolean	false	Set to true to flip the menu relative to the button
menuOptionsClass	let	No	string	--	Specify the menu options class
icon	let	No	typeof import("carbon-icons-svelte").CarbonIcon	--	Specify the icon from carbon-icons-svelte to render
iconClass	let	No	string	--	Specify the icon class
iconDescription	let	No	string	"Open and close list of options"	Specify the ARIA label for the icon
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the button element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--
menu	No	--	<svelte:component this="{icon}" aria-label="{iconDescription}" title="{iconDescription}" class="bx--overflow-menu__icon {iconClass}" />

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
keydown	forwarded	--
close	dispatched	--

OverflowMenuItem

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLAnchorElement | HTMLButtonElement	null	Obtain a reference to the HTML element
primaryFocus	let	Yes	boolean	false	Set to true if the item should be focused when opening the menu
text	let	No	string	"Provide text"	Specify the item text Alternatively, use the default slot for a custom element
href	let	No	string	""	Specify the href attribute if the item is a link
disabled	let	No	boolean	false	Set to true to disable the item
hasDivider	let	No	boolean	false	Set to true to include a divider
danger	let	No	boolean	false	Set to true to use the danger variant
requireTitle	let	No	boolean	true	Set to false to omit the button title attribute
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the top-level element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	<div class:bx--overflow-menu-options__option-content="{true}"> {text} </div>

Events

Event name	Type	Detail
click	forwarded	--
keydown	forwarded	--

Pagination

Props

Prop name	Kind	Reactive	Type	Default value	Description
pageSize	let	Yes	number	10	Specify the number of items to display in a page
page	let	Yes	number	1	Specify the current page index
totalItems	let	No	number	0	Specify the total number of items
disabled	let	No	boolean	false	Set to true to disable the pagination
forwardText	let	No	string	"Next page"	Specify the forward button text
backwardText	let	No	string	"Previous page"	Specify the backward button text
itemsPerPageText	let	No	string	"Items per page:"	Specify the items per page text
itemText	let	No	(min: number, max: number) => string	(min, max) => `${min}–${max} items`	Override the item text
itemRangeText	let	No	(min: number, max: number, total: number) => string	(min, max, total) => `${min}–${max} of ${total} items`	Override the item range text
pageInputDisabled	let	No	boolean	false	Set to true to disable the page input
pageSizeInputDisabled	let	No	boolean	false	Set to true to disable the page size input
pageSizes	let	No	number[]	[10]	Specify the available page sizes
pagesUnknown	let	No	boolean	false	Set to true if the number of pages is unknown
pageText	let	No	(page: number) => string	(page) => `page ${page}`	Override the page text
pageRangeText	let	No	(current: number, total: number) => string	(current, total) => `of ${total} page${total === 1 ? "" : "s"}`	Override the page range text
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the top-level element

Slots

None.

Events

Event name	Type	Detail
update	dispatched	--

PaginationNav

Props

Prop name	Kind	Reactive	Type	Default value	Description
page	let	Yes	number	0	Specify the current page index
total	let	No	number	10	Specify the total number of pages
shown	let	No	number	10	Specify the total number of pages to show
loop	let	No	boolean	false	Set to true to loop the navigation
forwardText	let	No	string	"Next page"	Specify the forward button text
backwardText	let	No	string	"Previous page"	Specify the backward button text

Slots

None.

Events

Event name	Type	Detail
click:button--previous	dispatched	--
click:button--next	dispatched	--
change	dispatched	--

PaginationSkeleton

Props

None.

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

PasswordInput

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLInputElement	null	Obtain a reference to the input HTML element
type	let	Yes	"text" | "password"	"password"	Set to "text" to toggle the password visibility
value	let	Yes	number | string	""	Specify the input value
size	let	No	"sm" | "xl"	--	Set the size of the input
placeholder	let	No	string	""	Specify the placeholder text
hidePasswordLabel	let	No	string	"Hide password"	Specify the hide password label text
showPasswordLabel	let	No	string	"Show password"	Specify the show password label text
tooltipAlignment	let	No	"start" | "center" | "end"	--	Set the alignment of the tooltip relative to the icon
tooltipPosition	let	No	"top" | "right" | "bottom" | "left"	--	Set the position of the tooltip relative to the icon
light	let	No	boolean	false	Set to true to enable the light variant
disabled	let	No	boolean	false	Set to true to disable the input
helperText	let	No	string	""	Specify the helper text
labelText	let	No	string	""	Specify the label text
hideLabel	let	No	boolean	false	Set to true to visually hide the label text
invalid	let	No	boolean	false	Set to true to indicate an invalid state
invalidText	let	No	string	""	Specify the text for the invalid state
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the input element
name	let	No	string	--	Specify a name attribute for the input

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
change	forwarded	--
input	forwarded	--
keydown	forwarded	--
focus	forwarded	--
blur	forwarded	--

ProgressIndicator

Props

Prop name	Kind	Reactive	Type	Default value	Description
currentIndex	let	Yes	number	0	Specify the current step index
vertical	let	No	boolean	false	Set to true to use the vertical variant
spaceEqually	let	No	boolean	false	Set to true to specify whether the progress steps should be split equally in size in the div
preventChangeOnClick	let	No	boolean	false	Set to true to prevent currentIndex from updating

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
change	dispatched	number
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

ProgressIndicatorSkeleton

Props

Prop name	Kind	Reactive	Type	Default value	Description
vertical	let	No	boolean	false	Set to true to use the vertical variant
count	let	No	number	4	Specify the number of steps to render

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

ProgressStep

Props

Prop name	Kind	Reactive	Type	Default value	Description
current	let	Yes	boolean	false	Set to true to use the current variant
complete	let	Yes	boolean	false	Set to true for the complete variant
disabled	let	No	boolean	false	Set to true to disable the progress step
invalid	let	No	boolean	false	Set to true to indicate an invalid state
description	let	No	string	""	Specify the step description
label	let	No	string	""	Specify the step label
secondaryLabel	let	No	string	""	Specify the step secondary label
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the top-level element

Slots

Slot name	Default	Props	Fallback
--	Yes	{ props: { class: 'bx--progress-label' } }	<p class:bx--progress-label="{true}">{label}</p>

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
keydown	forwarded	--

RadioButton

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLInputElement	null	Obtain a reference to the input HTML element
checked	let	Yes	boolean	false	Set to true to check the radio button
value	let	No	string	""	Specify the value of the radio button
disabled	let	No	boolean	false	et to true to disable the radio button
labelPosition	let	No	"right" | "left"	"right"	Specify the label position
labelText	let	No	string	""	Specify the label text
hideLabel	let	No	boolean	false	Set to true to visually hide the label text
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the input element
name	let	No	string	""	Specify a name attribute for the checkbox input

Slots

None.

Events

Event name	Type	Detail
change	forwarded	--

RadioButtonGroup

Props

Prop name	Kind	Reactive	Type	Default value	Description
selected	let	Yes	string	--	Set the selected radio button value
disabled	let	No	boolean	false	Set to true to disable the radio buttons
labelPosition	let	No	"right" | "left"	"right"	Specify the label position
orientation	let	No	"horizontal" | "vertical"	"horizontal"	Specify the orientation of the radio buttons
id	let	No	string	--	Set an id for the container div element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
change	dispatched	--

RadioButtonSkeleton

Props

None.

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

RadioTile

Props

Prop name	Kind	Reactive	Type	Default value	Description
checked	let	Yes	boolean	false	Set to true to check the tile
light	let	No	boolean	false	Set to true to enable the light variant
value	let	No	string	""	Specify the value of the radio input
tabindex	let	No	string	"0"	Specify the tabindex
iconDescription	let	No	string	"Tile checkmark"	Specify the ARIA label for the radio tile checkmark icon
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the input element
name	let	No	string	""	Specify a name attribute for the input

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
change	forwarded	--
keydown	forwarded	--
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

Row

Props

Prop name	Kind	Reactive	Type	Default value	Description
as	let	No	boolean	false	Set to true to render a custom HTML element Props are destructured as props in the default slot (e.g. <Row let:props><section {...props}>...</section></Row>)
condensed	let	No	boolean	false	Set to true to use the condensed variant
narrow	let	No	boolean	false	Set to true to use the narrow variant
noGutter	let	No	boolean	false	Set to true to remove the gutter
noGutterLeft	let	No	boolean	false	Set to true to remove the left gutter
noGutterRight	let	No	boolean	false	Set to true to remove the right gutter

Slots

Slot name	Default	Props	Fallback
--	Yes	{ props: { class: string; [key: string]: any; } }	--

Events

None.

Search

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLInputElement	null	Obtain a reference to the input HTML element
value	let	Yes	string	""	Specify the value of the search input
small	let	No	boolean	false	--
size	let	No	"sm" | "lg" | "xl"	"xl"	Specify the size of the search input
skeleton	let	No	boolean	false	Set to true to display the skeleton state
light	let	No	boolean	false	Set to true to enable the light variant
disabled	let	No	boolean	false	Set to true to disable the search input
type	let	No	string	"text"	Specify the type attribute of the search input
placeholder	let	No	string	"Search..."	Specify the placeholder attribute of the search input
autocomplete	let	No	"on" | "off"	"off"	Specify the autocomplete attribute
autofocus	let	No	boolean	false	Set to true to auto focus the search element
closeButtonLabelText	let	No	string	"Clear search input"	Specify the close button label text
labelText	let	No	string	""	Specify the label text
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the input element

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
change	forwarded	--
input	forwarded	--
focus	forwarded	--
blur	forwarded	--
clear	dispatched	--

SearchSkeleton

Props

Prop name	Kind	Reactive	Type	Default value	Description
small	let	No	boolean	false	--
size	let	No	"sm" | "lg" | "xl"	"xl"	Specify the size of the search input

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

Select

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLSelectElement	null	Obtain a reference to the select HTML element
selected	let	Yes	string	--	Specify the selected item value
size	let	No	"sm" | "xl"	--	Set the size of the select input
inline	let	No	boolean	false	Set to true to use the inline variant
light	let	No	boolean	false	Set to true to enable the light variant
disabled	let	No	boolean	false	Set to true to disable the select element
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the select element
name	let	No	string	--	Specify a name attribute for the select element
invalid	let	No	boolean	false	Set to true to indicate an invalid state
invalidText	let	No	string	""	Specify the invalid state text
helperText	let	No	string	""	Specify the helper text
noLabel	let	No	boolean	false	Set to true to not render a label
labelText	let	No	string	""	Specify the label text
hideLabel	let	No	boolean	false	Set to true to visually hide the label text

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
blur	forwarded	--
change	dispatched	--

SelectItem

Props

Prop name	Kind	Reactive	Type	Default value	Description
value	let	No	string	""	Specify the option value
text	let	No	string	""	Specify the option text
hidden	let	No	boolean	false	Set to true to hide the option
disabled	let	No	boolean	false	Set to true to disable the option

Slots

None.

Events

None.

SelectItemGroup

Props

Prop name	Kind	Reactive	Type	Default value	Description
disabled	let	No	boolean	false	Set to true to disable the optgroup element
label	let	No	string	"Provide label"	Specify the label attribute of the optgroup element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

SelectSkeleton

Props

Prop name	Kind	Reactive	Type	Default value	Description
hideLabel	let	No	boolean	false	Set to true to hide the label text

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

SelectableTile

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLInputElement	null	Obtain a reference to the input HTML element
selected	let	Yes	boolean	false	Set to true to select the tile
light	let	No	boolean	false	Set to true to enable the light variant
title	let	No	string	"title"	Specify the title of the selectable tile
value	let	No	string	"value"	Specify the value of the selectable tile
tabindex	let	No	string	"0"	Specify the tabindex
iconDescription	let	No	string	"Tile checkmark"	Specify the ARIA label for the selectable tile checkmark icon
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the input element
name	let	No	string	""	Specify a name attribute for the input

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
keydown	forwarded	--

SideNav

Props

Prop name	Kind	Reactive	Type	Default value	Description
isOpen	let	Yes	boolean	false	Set to true to toggle the expanded state
fixed	let	No	boolean	false	Set to true to use the fixed variant
ariaLabel	let	No	string	--	Specify the ARIA label for the nav

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

SideNavItems

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

SideNavLink

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLAnchorElement	null	Obtain a reference to the HTML anchor element
isSelected	let	No	boolean	false	Set to true to select the current link
href	let	No	string	--	Specify the href attribute
text	let	No	string	--	Specify the text
icon	let	No	{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }	--	Specify the icon props

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--

SideNavMenu

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLButtonElement	null	Obtain a reference to the HTML button element
expanded	let	Yes	boolean	false	Set to true to toggle the expanded state
text	let	No	string	--	Specify the text
icon	let	No	{ render: import("carbon-icons-svelte").CarbonIcon; skeleton: boolean; }	--	Specify the icon props

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--

SideNavMenuItem

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLAnchorElement	null	Obtain a reference to the HTML anchor element
isSelected	let	No	boolean	--	Set to true to select the item
href	let	No	string	--	Specify the href attribute
text	let	No	string	--	Specify the item text

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--

SkeletonPlaceholder

Props

None.

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

SkeletonText

Props

Prop name	Kind	Reactive	Type	Default value	Description
lines	let	No	number	3	Specify the number of lines to render
heading	let	No	boolean	false	Set to true to use the heading size variant
paragraph	let	No	boolean	false	Set to true to use the paragraph size variant
width	let	No	string	"100%"	Specify the width of the text (% or px)

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

SkipToContent

Props

Prop name	Kind	Reactive	Type	Default value	Description
href	let	No	string	"#main-content"	Specify the href attribute
tabindex	let	No	string	"0"	Specify the tabindex

Slots

Slot name	Default	Props	Fallback
--	Yes	--	Skip to main content

Events

Event name	Type	Detail
click	forwarded	--

Slider

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLDivElement	null	Obtain a reference to the HTML element
value	let	Yes	number	0	Specify the value of the slider
max	let	No	number	100	Set the maximum slider value
maxLabel	let	No	string	""	Specify the label for the max value
min	let	No	number	0	Set the minimum slider value
minLabel	let	No	string	""	Specify the label for the min value
step	let	No	number	1	Set the step value
stepMultiplier	let	No	number	4	Set the step multiplier value
required	let	No	boolean	false	Set to true to require a value
inputType	let	No	string	"number"	Specify the input type
disabled	let	No	boolean	false	Set to true to disable the slider
light	let	No	boolean	false	Set to true to enable the light variant
hideTextInput	let	No	boolean	false	Set to true to hide the text input
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the slider div element
invalid	let	No	boolean	false	Set to true to indicate an invalid state
labelText	let	No	string	""	Specify the label text
name	let	No	string	""	Set a name for the slider element

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
change	dispatched	--

SliderSkeleton

Props

Prop name	Kind	Reactive	Type	Default value	Description
hideLabel	let	No	boolean	false	Set to true to hide the label text

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

StructuredList

Props

Prop name	Kind	Reactive	Type	Default value	Description
selected	let	Yes	string	--	Specify the selected structured list row value
border	let	No	boolean	false	Set to true to use the bordered variant
selection	let	No	boolean	false	Set to true to use the selection variant

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
change	dispatched	--

StructuredListBody

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

StructuredListCell

Props

Prop name	Kind	Reactive	Type	Default value	Description
head	let	No	boolean	false	Set to true to use as a header
noWrap	let	No	boolean	false	Set to true to prevent wrapping

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

StructuredListHead

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

StructuredListInput

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLInputElement	null	Obtain a reference to the input HTML element
checked	let	Yes	boolean	false	Set to true to check the input
title	let	No	string	"title"	Specify the title of the input
value	let	No	string	"value"	Specify the value of the input
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the input element
name	let	No	string	""	Specify a name attribute for the input

Slots

None.

Events

None.

StructuredListRow

Props

Prop name	Kind	Reactive	Type	Default value	Description
head	let	No	boolean	false	Set to true to use as a header
label	let	No	boolean	false	Set to true to render a label slot
tabindex	let	No	string	"0"	Specify the tabindex

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
keydown	forwarded	--

StructuredListSkeleton

Props

Prop name	Kind	Reactive	Type	Default value	Description
rows	let	No	number	5	Specify the number of rows
border	let	No	boolean	false	Set to true to use the bordered variant

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

Switch

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLButtonElement	null	Obtain a reference to the button HTML element
selected	let	Yes	boolean	false	Set to true for the switch to be selected
text	let	No	string	"Provide text"	Specify the switch text Alternatively, use the named slot "text" (e.g. <span slot="text">...</span>)
disabled	let	No	boolean	false	Set to true to disable the switch
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the button element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	{text}

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
keydown	forwarded	--

Tab

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLAnchorElement	null	Obtain a reference to the anchor HTML element
label	let	No	string	""	Specify the tab label Alternatively, use the default slot (e.g. <Tab><span>Label</span></Tab>)
href	let	No	string	"#"	Specify the href attribute
disabled	let	No	boolean	false	Set to true to disable the tab
tabindex	let	No	string	"0"	Specify the tabindex
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the top-level element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	{label}

Events

Event name	Type	Detail
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

TabContent

Props

Prop name	Kind	Reactive	Type	Default value	Description
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the top-level element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

Table

Props

Prop name	Kind	Reactive	Type	Default value	Description
size	let	No	"compact" | "short" | "tall"	--	Set the size of the table
zebra	let	No	boolean	false	Set to true to use zebra styles
useStaticWidth	let	No	boolean	false	Set to true to use static width
shouldShowBorder	let	No	boolean	false	Set to true for the bordered variant
sortable	let	No	boolean	false	Set to true for the sortable variant
stickyHeader	let	No	boolean	false	Set to true to enable a sticky header

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

TableBody

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

TableCell

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

TableContainer

Props

Prop name	Kind	Reactive	Type	Default value	Description
title	let	No	string	""	Specify the title of the data table
description	let	No	string	""	Specify the description of the data table
stickyHeader	let	No	boolean	false	Set to true to enable a sticky header

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

TableHead

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

TableHeader

Props

Prop name	Kind	Reactive	Type	Default value	Description
scope	let	No	string	"col"	Specify the scope attribute
translateWithId	let	No	() => string	() => ""	Override the default id translations
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the top-level element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
click	forwarded	--

TableRow

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

Tabs

Props

Prop name	Kind	Reactive	Type	Default value	Description
selected	let	Yes	number	0	Specify the selected tab index
type	let	No	"default" | "container"	"default"	Specify the type of tabs
iconDescription	let	No	string	"Show menu options"	Specify the ARIA label for the chevron icon
triggerHref	let	No	string	"#"	Specify the tab trigger href attribute

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--
content	No	--	--

Events

Event name	Type	Detail
keypress	forwarded	--
click	forwarded	--
change	dispatched	--

TabsSkeleton

Props

Prop name	Kind	Reactive	Type	Default value	Description
count	let	No	number	4	Specify the number of tabs to render

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

Tag

Props

Prop name	Kind	Reactive	Type	Default value	Description
type	let	No	"red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast"	--	Specify the type of tag
filter	let	No	boolean	false	Set to true to use filterable variant
disabled	let	No	boolean	false	Set to true to disable a filterable tag
skeleton	let	No	boolean	false	Set to true to display the skeleton state
title	let	No	string	"Clear filter"	Set the title for the close button in a filterable tag
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the filterable tag

Slots

Slot name	Default	Props	Fallback
--	Yes	{ props: { class: 'bx--tag__label' } }	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

TagSkeleton

Props

None.

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

TextArea

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLTextAreaElement	null	Obtain a reference to the textarea HTML element
value	let	Yes	string	""	Specify the textarea value
placeholder	let	No	string	""	Specify the placeholder text
cols	let	No	number	50	Specify the number of cols
rows	let	No	number	4	Specify the number of rows
light	let	No	boolean	false	Set to true to enable the light variant
disabled	let	No	boolean	false	Set to true to disable the input
helperText	let	No	string	""	Specify the helper text
labelText	let	No	string	""	Specify the label text
hideLabel	let	No	boolean	false	Set to true to visually hide the label text
invalid	let	No	boolean	false	Set to true to indicate an invalid state
invalidText	let	No	string	""	Specify the text for the invalid state
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the textarea element
name	let	No	string	--	Specify a name attribute for the input

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
change	forwarded	--
input	forwarded	--
focus	forwarded	--
blur	forwarded	--

TextAreaSkeleton

Props

Prop name	Kind	Reactive	Type	Default value	Description
hideLabel	let	No	boolean	false	Set to true to visually hide the label text

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

TextInput

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLInputElement	null	Obtain a reference to the input HTML element
value	let	Yes	number | string	""	Specify the input value
size	let	No	"sm" | "xl"	--	Set the size of the input
type	let	No	string	""	Specify the input type
placeholder	let	No	string	""	Specify the placeholder text
light	let	No	boolean	false	Set to true to enable the light variant
disabled	let	No	boolean	false	Set to true to disable the input
helperText	let	No	string	""	Specify the helper text
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the input element
name	let	No	string	--	Specify a name attribute for the input
labelText	let	No	string	""	Specify the label text
hideLabel	let	No	boolean	false	Set to true to visually hide the label text
invalid	let	No	boolean	false	Set to true to indicate an invalid state
invalidText	let	No	string	""	Specify the invalid state text
warn	let	No	boolean	false	Set to true to indicate an warning state
warnText	let	No	string	""	Specify the warning state text
required	let	No	boolean	false	Set to true to mark the field as required
inline	let	No	boolean	false	Set to true to use inline version

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
change	forwarded	--
input	forwarded	--
keydown	forwarded	--
focus	forwarded	--
blur	forwarded	--

TextInputSkeleton

Props

Prop name	Kind	Reactive	Type	Default value	Description
hideLabel	let	No	boolean	false	Set to true to hide the label text

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

Tile

Props

Prop name	Kind	Reactive	Type	Default value	Description
light	let	No	boolean	false	Set to true to enable the light variant

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

TileGroup

Props

Prop name	Kind	Reactive	Type	Default value	Description
selected	let	Yes	string	--	Specify the selected tile value
disabled	let	No	boolean	false	Set to true to disable the tile group
legend	let	No	string	""	Specify the legend text

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
select	dispatched	--

TimePicker

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLInputElement	null	Obtain a reference to the input HTML element
value	let	Yes	string	""	Specify the input value
size	let	No	"sm" | "xl"	--	Specify the size of the input
type	let	No	string	"text"	Specify the input type
placeholder	let	No	string	"hh=mm"	Specify the input placeholder text
pattern	let	No	string	"(1[012]|[1-9]):[0-5]0-9?"	Specify the pattern attribute for the input element
maxlength	let	No	number	5	Specify the maxlength input attribute
light	let	No	boolean	false	Set to true to enable the light variant
disabled	let	No	boolean	false	Set to true to disable the input
labelText	let	No	string	""	Specify the label text
hideLabel	let	No	boolean	false	Set to true to visually hide the label text
invalid	let	No	boolean	false	Set to true to indicate an invalid state
invalidText	let	No	string	""	Specify the invalid state text
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the input element
name	let	No	string	--	Specify a name attribute for the input

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
change	forwarded	--
input	forwarded	--
focus	forwarded	--
blur	forwarded	--

TimePickerSelect

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLSelectElement	null	Obtain a reference to the select HTML element
value	let	Yes	number | string	""	Specify the select value
disabled	let	No	boolean	false	Set to true to disable the select
iconDescription	let	No	string	"Open list of options"	Specify the ARIA label for the chevron icon
labelText	let	No	string	""	Specify the label text
hideLabel	let	No	boolean	true	--
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the select element
name	let	No	string	--	Specify a name attribute for the select element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

ToastNotification

Props

Prop name	Kind	Reactive	Type	Default value	Description
notificationType	let	No	"toast" | "inline"	"toast"	Set the type of notification
kind	let	No	"error" | "info" | "info-square" | "success" | "warning" | "warning-alt"	"error"	Specify the kind of notification
lowContrast	let	No	boolean	false	Set to true to use the low contrast variant
timeout	let	No	number	0	Set the timeout duration (ms) to hide the notification after opening it
role	let	No	string	"alert"	Set the role attribute
title	let	No	string	"Title"	Specify the title text
subtitle	let	No	string	""	Specify the subtitle text
caption	let	No	string	"Caption"	Specify the caption text
iconDescription	let	No	string	"Closes notification"	Specify the ARIA label for the icon
hideCloseButton	let	No	boolean	false	Set to true to hide the close button

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
close	dispatched	--

Toggle

Props

Prop name	Kind	Reactive	Type	Default value	Description
toggled	let	Yes	boolean	false	Set to true to toggle the checkbox input
size	let	No	"default" | "sm"	"default"	Specify the toggle size
disabled	let	No	boolean	false	Set to true to disable checkbox input
labelA	let	No	string	"Off"	Specify the label for the untoggled state
labelB	let	No	string	"On"	Specify the label for the toggled state
labelText	let	No	string	""	Specify the label text
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the input element
name	let	No	string	--	Specify a name attribute for the checkbox input

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
change	forwarded	--
keyup	forwarded	--
focus	forwarded	--
blur	forwarded	--

ToggleSkeleton

Props

Prop name	Kind	Reactive	Type	Default value	Description
size	let	No	"default" | "sm"	"default"	Specify the toggle size
labelText	let	No	string	""	Specify the label text
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the input element

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

ToggleSmall

Props

Prop name	Kind	Reactive	Type	Default value	Description
toggled	let	Yes	boolean	false	Set to true to toggle the checkbox input
disabled	let	No	boolean	false	Set to true to disable checkbox input
labelA	let	No	string	"Off"	Specify the label for the untoggled state
labelB	let	No	string	"On"	Specify the label for the toggled state
labelText	let	No	string	""	Specify the label text
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the input element
name	let	No	string	--	Specify a name attribute for the checkbox input

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
change	forwarded	--
keyup	forwarded	--
focus	forwarded	--
blur	forwarded	--

ToggleSmallSkeleton

Props

Prop name	Kind	Reactive	Type	Default value	Description
labelText	let	No	string	""	Specify the label text
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the input element

Slots

None.

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--

Toolbar

Props

Prop name	Kind	Reactive	Type	Default value	Description
size	let	No	"sm" | "default"	"default"	Specify the toolbar size

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

ToolbarBatchActions

Props

Prop name	Kind	Reactive	Type	Default value	Description
formatTotalSelected	let	No	(totalSelected: number) => string	(totalSelected) => `${totalSelected} item${totalSelected === 1 ? "" : "s"} selected`	Override the total items selected text

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

ToolbarContent

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

ToolbarMenu

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

None.

ToolbarMenuItem

Props

None.

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
keydown	forwarded	--

ToolbarSearch

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLInputElement	null	Obtain a reference to the input HTML element
expanded	let	Yes	boolean	false	Set to true to expand the search bar
value	let	Yes	number | string	""	Specify the value of the search input
persistent	let	No	boolean	false	Set to true to keep the search bar expanded
tabindex	let	No	string	"0"	Specify the tabindex

Slots

None.

Events

Event name	Type	Detail
change	forwarded	--
input	forwarded	--
focus	forwarded	--
blur	forwarded	--

Tooltip

Props

Prop name	Kind	Reactive	Type	Default value	Description
refIcon	let	Yes	null | HTMLDivElement	null	Obtain a reference to the icon HTML element
refTooltip	let	Yes	null | HTMLDivElement	null	Obtain a reference to the tooltip HTML element
ref	let	Yes	null | HTMLDivElement	null	Obtain a reference to the trigger text HTML element
open	let	Yes	boolean	false	Set to true to open the tooltip
direction	let	No	"top" | "right" | "bottom" | "left"	"bottom"	Set the direction of the tooltip relative to the button
hideIcon	let	No	boolean	false	Set to true to hide the tooltip icon
icon	let	No	typeof import("carbon-icons-svelte").CarbonIcon	--	Specify the icon from carbon-icons-svelte to render for the tooltip button Icon size must be 16px (e.g. Add16, Task16)
iconDescription	let	No	string	""	Specify the ARIA label for the tooltip button
iconName	let	No	string	""	Specify the icon name attribute
tabindex	let	No	string	"0"	Set the button tabindex
tooltipId	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the tooltip
triggerId	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the tooltip button
triggerText	let	No	string	""	Set the tooltip button text

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--
icon	No	--	<svelte:component this="{icon}" name="{iconName}" />
triggerText	No	--	{triggerText}

Events

None.

TooltipDefinition

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLButtonElement	null	Obtain a reference to the button HTML element
tooltipText	let	No	string	""	Specify the tooltip text
align	let	No	"start" | "center" | "end"	"center"	Set the alignment of the tooltip relative to the icon
direction	let	No	"top" | "bottom"	"bottom"	Set the direction of the tooltip relative to the icon
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the tooltip div element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--
tooltip	No	--	{tooltipText}

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
focus	forwarded	--

TooltipIcon

Props

Prop name	Kind	Reactive	Type	Default value	Description
ref	let	Yes	null | HTMLButtonElement	null	Obtain a reference to the button HTML element
tooltipText	let	No	string	""	Specify the tooltip text
align	let	No	"start" | "center" | "end"	"center"	Set the alignment of the tooltip relative to the icon
direction	let	No	"top" | "right" | "bottom" | "left"	"bottom"	Set the direction of the tooltip relative to the icon
id	let	No	string	"ccs-" + Math.random().toString(36)	Set an id for the span element

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--
focus	forwarded	--

UnorderedList

Props

Prop name	Kind	Reactive	Type	Default value	Description
nested	let	No	boolean	false	Set to true to use the nested variant

Slots

Slot name	Default	Props	Fallback
--	Yes	--	--

Events

Event name	Type	Detail
click	forwarded	--
mouseover	forwarded	--
mouseenter	forwarded	--
mouseleave	forwarded	--