carbon-components-svelte

Svelte implementation of the Carbon Design System

Getting Started

carbon-components-svelte can be installed as a development dependency.

yarn add -D carbon-components-svelte

Usage

<script>
  import { Button } from "carbon-components-svelte";
</script>

<svelte:head>
  <link
    rel="stylesheet"
    href="https://unpkg.com/carbon-components/css/carbon-components.min.css"
  />
</svelte:head>

<Button>Primary</Button>

Components

147 components exported from "carbon-components-svelte"

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

Component Index

AccordionSkeleton

Usage

Component Group: Accordion

Import Path

import { AccordionSkeleton } from "carbon-components-svelte";

API

Prop name	Type	Default
count	number	4
open	boolean	true

---

Accordion

Usage

Component Group: Accordion

Import Path

import { Accordion } from "carbon-components-svelte";

API

Prop name	Type	Default
align	"start" | "end"	"end"
skeleton	boolean	false

---

AccordionItem

Usage

Component Group: Accordion

Import Path

import { AccordionItem } from "carbon-components-svelte";

API

Prop name	Type	Default
title	string	"title"
open	boolean	false
iconDescription	string	"Expand/Collapse"

---

BreadcrumbSkeleton

Usage

Component Group: Breadcrumb

Import Path

import { BreadcrumbSkeleton } from "carbon-components-svelte";

API

Prop name	Type	Default
noTrailingSlash	boolean	false
count	number	3

---

Breadcrumb

Usage

Component Group: Breadcrumb

Import Path

import { Breadcrumb } from "carbon-components-svelte";

API

Prop name	Type	Default
noTrailingSlash	boolean	false
skeleton	boolean	false

---

BreadcrumbItem

Usage

Component Group: Breadcrumb

Import Path

import { BreadcrumbItem } from "carbon-components-svelte";

API

Prop name	Type	Default
href	string	-
isCurrentPage	boolean	false

---

ButtonSkeleton

Usage

Component Group: Button

Import Path

import { ButtonSkeleton } from "carbon-components-svelte";

API

Prop name	Type	Default
href	string	-
small	boolean	false

---

Button

Usage

Component Group: Button

Import Path

import { Button } from "carbon-components-svelte";

API

Prop name	Type	Default
kind	"primary" | "secondary" | "tertiary" | "ghost" | "danger"	"primary"
size	"default" | "field" | "small"	"default"
hasIconOnly	boolean	false
icon	typeof import("carbon-icons-svelte/lib/Add16").default	-
iconDescription	string	-
tooltipAlignment	"start" | "center" | "end"	-
tooltipPosition	"top" | "right" | "bottom" | "left"	-
as	boolean	false
skeleton	boolean	false
disabled	boolean	false
href	string	-
tabindex	string	"0"
type	string	"button"
ref	null | HTMLAnchorElement | HTMLButtonElement	null

---

CheckboxSkeleton

Usage

Component Group: Checkbox

Import Path

import { CheckboxSkeleton } from "carbon-components-svelte";

API

No exported props.

---

Checkbox

Usage

Component Group: Checkbox

Import Path

import { Checkbox } from "carbon-components-svelte";

API

Prop name	Type	Default
checked	boolean	false
indeterminate	boolean	false
skeleton	boolean	false
readonly	boolean	false
disabled	boolean	false
labelText	string	""
hideLabel	boolean	false
name	string	""
title	string	-
id	string	-
ref	null | HTMLInputElement	null

---

CodeSnippetSkeleton

Usage

Component Group: CodeSnippet

Import Path

import { CodeSnippetSkeleton } from "carbon-components-svelte";

API

Prop name	Type	Default
type	"single" | "inline" | "multi"	"single"

---

CodeSnippet

Usage

Component Group: CodeSnippet

Import Path

import { CodeSnippet } from "carbon-components-svelte";

API

Prop name	Type	Default
type	"single" | "inline" | "multi"	"single"
code	string	-
expanded	boolean	false
light	boolean	false
skeleton	boolean	false
copyButtonDescription	string	-
copyLabel	string	-
feedback	string	"Copied!"
feedbackTimeout	number	2000
showLessText	string	"Show more"
showMoreLess	boolean	false
id	string	-
ref	null | HTMLPreElement	null

---

ComboBox

Usage

Component Group: ComboBox

Import Path

import { ComboBox } from "carbon-components-svelte";

API

Prop name	Type	Default
items	ComboBoxItem[]	[]
itemToString	(item: ComboBoxItem) => string	(item: ComboBoxItem) => string
selectedIndex	number	-1
value	string	""
size	"sm" | "xl"	-
disabled	boolean	false
titleText	string	""
placeholder	string	""
helperText	string	""
invalidText	string	""
invalid	boolean	false
light	boolean	false
open	boolean	false
shouldFilterItem	(item: ComboBoxItem, value: string) => boolean	() => true
translateWithId	(id: any) => string	-
id	string	-
name	string	-
ref	null | HTMLInputElement	null

---

ComposedModal

Usage

Component Group: ComposedModal

Import Path

import { ComposedModal } from "carbon-components-svelte";

API

Prop name	Type	Default
size	"xs" | "sm" | "lg"	-
open	boolean	false
danger	boolean	false
containerClass	string	""
selectorPrimaryFocus	string	"[data-modal-primary-focus]"
ref	null | HTMLElement	null

---

ModalBody

Usage

Component Group: ComposedModal

Import Path

import { ModalBody } from "carbon-components-svelte";

API

Prop name	Type	Default
hasForm	boolean	false
hasScrollingContent	boolean	false

---

ModalFooter

Usage

Component Group: ComposedModal

Import Path

import { ModalFooter } from "carbon-components-svelte";

API

Prop name	Type	Default
primaryButtonText	string	""
primaryButtonDisabled	boolean	false
primaryClass	string	-
secondaryButtonText	string	""
secondaryClass	string	-
danger	boolean	false

---

ModalHeader

Usage

Component Group: ComposedModal

Import Path

import { ModalHeader } from "carbon-components-svelte";

API

Prop name	Type	Default
title	string	""
label	string	""
labelClass	string	""
titleClass	string	""
closeClass	string	""
closeIconClass	string	""
iconDescription	string	"Close"

---

ContentSwitcher

Usage

Component Group: ContentSwitcher

Import Path

import { ContentSwitcher } from "carbon-components-svelte";

API

Prop name	Type	Default
selectedIndex	number	0
light	boolean	false

---

Switch

Usage

Component Group: ContentSwitcher

Import Path

import { Switch } from "carbon-components-svelte";

API

Prop name	Type	Default
text	string	"Provide text"
selected	boolean	false
disabled	boolean	false
id	string	-
ref	null | HTMLButtonElement	null

---

Copy

Usage

Component Group: Copy

Import Path

import { Copy } from "carbon-components-svelte";

API

Prop name	Type	Default
feedback	string	"Copied!"
feedbackTimeout	number	2000
ref	null | HTMLButtonElement	null

---

CopyButton

Usage

Component Group: CopyButton

Import Path

import { CopyButton } from "carbon-components-svelte";

API

Prop name	Type	Default
iconDescription	string	"Copy to clipboard"

---

DataTable

Usage

Component Group: DataTable

Import Path

import { DataTable } from "carbon-components-svelte";

API

Prop name	Type	Default
headers	{key: string; value: string;}	[]
rows	Object[]	[]
size	"compact" | "short" | "tall"	-
title	string	""
description	string	""
zebra	boolean	false
sortable	boolean	false
stickyHeader	boolean	false

---

Table

Usage

Component Group: DataTable

Import Path

import { Table } from "carbon-components-svelte";

API

Prop name	Type	Default
size	"compact" | "short" | "tall"	-
zebra	boolean	false
useStaticWidth	boolean	false
shouldShowBorder	boolean	false
sortable	boolean	false
stickyHeader	boolean	false

---

TableBody

Usage

Component Group: DataTable

Import Path

import { TableBody } from "carbon-components-svelte";

API

No exported props.

---

TableCell

Usage

Component Group: DataTable

Import Path

import { TableCell } from "carbon-components-svelte";

API

No exported props.

---

TableContainer

Usage

Component Group: DataTable

Import Path

import { TableContainer } from "carbon-components-svelte";

API

Prop name	Type	Default
title	string	""
description	string	""
stickyHeader	boolean	false

---

TableHead

Usage

Component Group: DataTable

Import Path

import { TableHead } from "carbon-components-svelte";

API

No exported props.

---

TableHeader

Usage

Component Group: DataTable

Import Path

import { TableHeader } from "carbon-components-svelte";

API

Prop name	Type	Default
scope	string	"col"
translateWithId	() => string	() => ""
id	string	-

---

TableRow

Usage

Component Group: DataTable

Import Path

import { TableRow } from "carbon-components-svelte";

API

Prop name	Type	Default
isSelected	boolean	false

---

DataTableSkeleton

Usage

Component Group: DataTableSkeleton

Import Path

import { DataTableSkeleton } from "carbon-components-svelte";

API

Prop name	Type	Default
columns	number	5
rows	number	5
compact	boolean	false
zebra	boolean	false
headers	string[]	[]

---

DatePickerSkeleton

Usage

Component Group: DatePicker

Import Path

import { DatePickerSkeleton } from "carbon-components-svelte";

API

Prop name	Type	Default
range	boolean	false
id	string	-

---

DatePicker

Usage

Component Group: DatePicker

Import Path

import { DatePicker } from "carbon-components-svelte";

API

Prop name	Type	Default
datePickerType	"simple" | "single" | "range"	"simple"
value	string	""
appendTo	HTMLElement	document.body
dateFormat	string	"m/d/Y"
maxDate	null | string | Date	null
minDate	null | string | Date	null
locale	string	"en"
short	boolean	false
light	boolean	false
id	string	-

---

DatePickerInput

Usage

Component Group: DatePicker

Import Path

import { DatePickerInput } from "carbon-components-svelte";

API

Prop name	Type	Default
size	"sm" | "xl"	-
type	string	"text"
placeholder	string	""
iconDescription	string	""
id	string	-
invalid	boolean	false
invalidText	string	""
ref	null | HTMLInputElement	null

---

DropdownSkeleton

Usage

Component Group: Dropdown

Import Path

import { DropdownSkeleton } from "carbon-components-svelte";

API

Prop name	Type	Default
inline	boolean	false

---

Dropdown

Usage

Component Group: Dropdown

Import Path

import { Dropdown } from "carbon-components-svelte";

API

Prop name	Type	Default
items	DropdownItem[]	[]
itemToString	(item: DropdownItem) => string	(item: DropdownItem) => DropdownItemText
selectedIndex	number	-1
type	"default" | "inline"	"default"
size	"sm" | "lg" | "xl"	-
open	boolean	false
inline	boolean	false
light	boolean	false
disabled	boolean	false
titleText	string	""
invalid	boolean	false
invalidText	string	""
helperText	string	""
label	string	-
translateWithId	(id: any) => string	-
id	string	-
name	string	-
ref	null | HTMLButtonElement	null

---

FileUploaderSkeleton

Usage

Component Group: FileUploader

Import Path

import { FileUploaderSkeleton } from "carbon-components-svelte";

API

No exported props.

---

FileUploader

Usage

Component Group: FileUploader

Import Path

import { FileUploader } from "carbon-components-svelte";

API

Prop name	Type	Default
status	"uploading" | "edit" | "complete"	"uploading"
accept	string[]	[]
files	string[]	[]
multiple	boolean	false
clearFiles	() => any	() => void
labelDescription	string	""
labelTitle	string	""
kind	"primary" | "secondary" | "tertiary" | "ghost" | "danger"	"primary"
buttonLabel	string	""
iconDescription	string	""
name	string	-

---

FileUploaderButton

Usage

Component Group: FileUploader

Import Path

import { FileUploaderButton } from "carbon-components-svelte";

API

Prop name	Type	Default
accept	string[]	[]
multiple	boolean	false
disabled	boolean	false
disableLabelChanges	boolean	false
kind	"primary" | "secondary" | "tertiary" | "ghost" | "danger"	"primary"
labelText	string	"Add file"
role	string	"button"
tabindex	string	"0"
id	string	-
name	string	-
ref	null | HTMLInputElement	null

---

FileUploaderDropContainer

Usage

Component Group: FileUploader

Import Path

import { FileUploaderDropContainer } from "carbon-components-svelte";

API

Prop name	Type	Default
accept	string[]	[]
multiple	boolean	false
validateFiles	(files: Files) => Files	(files: Files) => Files
labelText	string	"Add file"
role	string	"button"
disabled	boolean	false
tabindex	string	"0"
id	string	-
name	string	""
ref	null | HTMLInputElement	null

---

FileUploaderItem

Usage

Component Group: FileUploader

Import Path

import { FileUploaderItem } from "carbon-components-svelte";

API

Prop name	Type	Default
status	"uploading" | "edit" | "complete"	"uploading"
iconDescription	string	""
invalid	boolean	false
errorSubject	string	""
errorBody	string	""
id	string	-
name	string	""

---

Filename

Usage

Component Group: FileUploader

Import Path

import { Filename } from "carbon-components-svelte";

API

Prop name	Type	Default
status	"uploading" | "edit" | "complete"	"uploading"
iconDescription	string	""
invalid	boolean	false

---

Form

Usage

Component Group: Form

Import Path

import { Form } from "carbon-components-svelte";

API

No exported props.

---

FormGroup

Usage

Component Group: FormGroup

Import Path

import { FormGroup } from "carbon-components-svelte";

API

Prop name	Type	Default
invalid	boolean	false

---

FormItem

Usage

Component Group: FormItem

Import Path

import { FormItem } from "carbon-components-svelte";

API

No exported props.

---

FormLabel

Usage

Component Group: FormLabel

Import Path

import { FormLabel } from "carbon-components-svelte";

API

Prop name	Type	Default
id	string	-

---

Column

Usage

Component Group: Grid

Import Path

import { Column } from "carbon-components-svelte";

API

Prop name	Type	Default
as	boolean	false
noGutter	boolean	false
noGutterLeft	boolean	false
noGutterRight	boolean	false
aspectRatio	"2x1" | "16x9" | "9x16" | "1x2" | "4x3" | "3x4" | "1x1"	-
sm	ColumnBreakpoint	-
md	ColumnBreakpoint	-
lg	ColumnBreakpoint	-
xlg	ColumnBreakpoint	-
max	ColumnBreakpoint	-

---

Grid

Usage

Component Group: Grid

Import Path

import { Grid } from "carbon-components-svelte";

API

Prop name	Type	Default
as	boolean	false
condensed	boolean	false
narrow	boolean	false
fullWidth	boolean	false
noGutter	boolean	false
noGutterLeft	boolean	false
noGutterRight	boolean	false

---

Row

Usage

Component Group: Grid

Import Path

import { Row } from "carbon-components-svelte";

API

Prop name	Type	Default
as	boolean	false
condensed	boolean	false
narrow	boolean	false
noGutter	boolean	false
noGutterLeft	boolean	false
noGutterRight	boolean	false

---

IconSkeleton

Usage

Component Group: Icon

Import Path

import { IconSkeleton } from "carbon-components-svelte";

API

Prop name	Type	Default
size	number	16

---

Icon

Usage

Component Group: Icon

Import Path

import { Icon } from "carbon-components-svelte";

API

Prop name	Type	Default
render	typeof import("carbon-icons-svelte/lib/Add16").default	-
skeleton	boolean	false

---

InlineLoading

Usage

Component Group: InlineLoading

Import Path

import { InlineLoading } from "carbon-components-svelte";

API

Prop name	Type	Default
status	"active" | "inactive" | "finished" | "error"	"active"
description	string	-
iconDescription	string	"Expand/Collapse"
successDelay	number	1500

---

Link

Usage

Component Group: Link

Import Path

import { Link } from "carbon-components-svelte";

API

Prop name	Type	Default
inline	boolean	false
disabled	boolean	false
ref	null | HTMLAnchorElement | HTMLParagraphElement	null

---

ListBox

Usage

Component Group: ListBox

Import Path

import { ListBox } from "carbon-components-svelte";

API

Prop name	Type	Default
size	"sm" | "xl"	-
type	"default" | "inline"	"default"
open	boolean	false
light	boolean	false
disable	boolean	false
invalid	boolean	false
invalidText	string	""

---

ListBoxField

Usage

Component Group: ListBox

Import Path

import { ListBoxField } from "carbon-components-svelte";

API

Prop name	Type	Default
disabled	boolean	false
role	string	"combobox"
tabindex	string	"-1"
translateWithId	(id: ListBoxFieldTranslationId) => string	(id) => string
id	string	-
ref	null | HTMLElement	null

---

ListBoxMenu

Usage

Component Group: ListBox

Import Path

import { ListBoxMenu } from "carbon-components-svelte";

API

Prop name	Type	Default
id	string	-

---

ListBoxMenuIcon

Usage

Component Group: ListBox

Import Path

import { ListBoxMenuIcon } from "carbon-components-svelte";

API

Prop name	Type	Default
open	boolean	false
translateWithId	(id: ListBoxMenuIconTranslationId) => string	(id) => string

---

ListBoxMenuItem

Usage

Component Group: ListBox

Import Path

import { ListBoxMenuItem } from "carbon-components-svelte";

API

Prop name	Type	Default
active	boolean	false
highlighted	boolean	false

---

ListBoxSelection

Usage

Component Group: ListBox

Import Path

import { ListBoxSelection } from "carbon-components-svelte";

API

Prop name	Type	Default
selectionCount	any	-
disabled	boolean	false
translateWithId	(id: ListBoxSelectionTranslationId) => string	(id) => string
ref	null | HTMLElement	null

---

ListItem

Usage

Component Group: ListItem

Import Path

import { ListItem } from "carbon-components-svelte";

API

No exported props.

---

Loading

Usage

Component Group: Loading

Import Path

import { Loading } from "carbon-components-svelte";

API

Prop name	Type	Default
small	boolean	false
active	boolean	true
withOverlay	boolean	false
description	string	"Active loading indicator"
id	string	-

---

Modal

Usage

Component Group: Modal

Import Path

import { Modal } from "carbon-components-svelte";

API

Prop name	Type	Default
size	"xs" | "sm" | "lg"	-
open	boolean	false
danger	boolean	false
passiveModal	boolean	false
modalHeading	string	-
modalLabel	string	-
modalAriaLabel	string	-
iconDescription	string	"Close the modal"
hasForm	boolean	false
hasScrollingContent	boolean	false
primaryButtonText	string	""
primaryButtonDisabled	boolean	false
shouldSubmitOnEnter	boolean	true
secondaryButtonText	string	""
selectorPrimaryFocus	string	"[data-modal-primary-focus]"
id	string	-
ref	null | HTMLElement	null

---

MultiSelect

Usage

Component Group: MultiSelect

Import Path

import { MultiSelect } from "carbon-components-svelte";

API

Prop name	Type	Default
items	MultiSelectItem[]	[]
itemToString	(item: MultiSelectItem) => string	(item: MultiSelectItem) => MultiSelectItemText
selectedIds	MultiSelectItemId[]	[]
value	string	""
size	"sm" | "lg" | "xl"	-
type	"default" | "inline"	"default"
selectionFeedback	"top" | "fixed" | "top-after-reopen"	"top-after-reopen"
disabled	boolean	false
filterable	boolean	false
filterItem	(item: MultiSelectItem, value: string) => string	(item: MultiSelectItem, value: string) => string
open	boolean	false
light	boolean	false
locale	string	"en"
placeholder	string	""
sortItem	(a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem	(a: MultiSelectItem, b: MultiSelectItem) => MultiSelectItem
translateWithId	(id: any) => string	-
titleText	string	""
useTitleInItem	boolean	false
invalid	boolean	false
invalidText	string	""
helperText	string	""
label	string	-
id	string	-
name	string	-

---

InlineNotification

Usage

Component Group: Notification

Import Path

import { InlineNotification } from "carbon-components-svelte";

API

Prop name	Type	Default
notificationType	"toast" | "inline"	"toast"
kind	"error" | "info" | "info-square" | "success" | "warning" | "warning-alt"	"error"
lowContrast	boolean	false
role	string	"alert"
title	string	"Title"
subtitle	string	""
hideCloseButton	boolean	false
iconDescription	string	"Closes notification"

---

NotificationActionButton

Usage

Component Group: Notification

Import Path

import { NotificationActionButton } from "carbon-components-svelte";

API

No exported props.

---

NotificationButton

Usage

Component Group: Notification

Import Path

import { NotificationButton } from "carbon-components-svelte";

API

Prop name	Type	Default
notificationType	"toast" | "inline"	"toast"
renderIcon	typeof import("carbon-icons-svelte/lib/Add16").default	-
iconDescription	string	"Close icon"

---

NotificationIcon

Usage

Component Group: Notification

Import Path

import { NotificationIcon } from "carbon-components-svelte";

API

Prop name	Type	Default
kind	"error" | "info" | "info-square" | "success" | "warning" | "warning-alt"	"error"
notificationType	"toast" | "inline"	"toast"
iconDescription	string	"Closes notification"

---

NotificationTextDetails

Usage

Component Group: Notification

Import Path

import { NotificationTextDetails } from "carbon-components-svelte";

API

Prop name	Type	Default
notificationType	"toast" | "inline"	"toast"
title	string	"Title"
subtitle	string	""
caption	string	"Caption"

---

ToastNotification

Usage

Component Group: Notification

Import Path

import { ToastNotification } from "carbon-components-svelte";

API

Prop name	Type	Default
notificationType	"toast" | "inline"	"toast"
kind	"error" | "info" | "info-square" | "success" | "warning" | "warning-alt"	"error"
lowContrast	boolean	false
timeout	number	0
role	string	"alert"
title	string	"Title"
subtitle	string	""
caption	string	"Caption"
iconDescription	string	"Closes notification"
hideCloseButton	boolean	false

---

NumberInputSkeleton

Usage

Component Group: NumberInput

Import Path

import { NumberInputSkeleton } from "carbon-components-svelte";

API

Prop name	Type	Default
hideLabel	boolean	false

---

NumberInput

Usage

Component Group: NumberInput

Import Path

import { NumberInput } from "carbon-components-svelte";

API

Prop name	Type	Default
size	"sm" | "xl"	-
value	string	""
step	number	1
max	number	-
min	number	-
light	boolean	false
readonly	boolean	false
mobile	boolean	false
allowEmpty	boolean	false
disabled	boolean	false
iconDescription	string	""
invalid	boolean	false
invalidText	string	"Provide invalidText"
helperText	string	""
label	string	""
hideLabel	boolean	false
translateWithId	(id: NumberInputTranslationId) => string	(id: NumberInputTranslationId) => string
id	string	-
name	string	-
ref	null | HTMLInputElement	null

---

OrderedList

Usage

Component Group: OrderedList

Import Path

import { OrderedList } from "carbon-components-svelte";

API

Prop name	Type	Default
nested	boolean	false

---

OverflowMenu

Usage

Component Group: OverflowMenu

Import Path

import { OverflowMenu } from "carbon-components-svelte";

API

Prop name	Type	Default
direction	"top" | "bottom"	"bottom"
open	boolean	false
light	boolean	false
flipped	boolean	false
menuOptionsClass	string	-
icon	typeof import("carbon-icons-svelte/lib/Add16").default	-
iconClass	string	-
iconDescription	string	"Open and close list of options"
id	string	-

---

OverflowMenuItem

Usage

Component Group: OverflowMenu

Import Path

import { OverflowMenuItem } from "carbon-components-svelte";

API

Prop name	Type	Default
text	string	"Provide text"
href	string	""
primaryFocus	boolean	false
disabled	boolean	false
hasDivider	boolean	false
danger	boolean	false
requireTitle	boolean	false
id	string	-
ref	null | HTMLAnchorElement | HTMLButtonElement	null

---

PaginationSkeleton

Usage

Component Group: Pagination

Import Path

import { PaginationSkeleton } from "carbon-components-svelte";

API

No exported props.

---

Pagination

Usage

Component Group: Pagination

Import Path

import { Pagination } from "carbon-components-svelte";

API

Prop name	Type	Default
page	number	1
total	number	0
disabled	boolean	false
forwardText	string	"Next page"
backwardText	string	"Previous page"
itemsPerPageText	string	"Items per page:"
itemText	(min: number, max: number) => string	(min: number, max: number) => string
itemRangeText	(min: number, max: number, total: number) => string	(min: number, max: number, total: number) => string
pageInputDisabled	boolean	false
pageSize	number	10
pageSizes	number[]	[10]
pagesUnknown	boolean	false
pageText	(page: number) => string	(current: number) => string
pageRangeText	(current: number, total: number) => string	(current: number, total: number) => string
id	string	-

---

PaginationItem

Usage

Component Group: PaginationNav

Import Path

import { PaginationItem } from "carbon-components-svelte";

API

Prop name	Type	Default
page	number	0
active	boolean	false

---

PaginationNav

Usage

Component Group: PaginationNav

Import Path

import { PaginationNav } from "carbon-components-svelte";

API

Prop name	Type	Default
page	number	0
total	number	10
shown	number	10
loop	boolean	false
forwardText	string	"Next page"
backwardText	string	"Next page"

---

PaginationOverflow

Usage

Component Group: PaginationNav

Import Path

import { PaginationOverflow } from "carbon-components-svelte";

API

Prop name	Type	Default
fromIndex	number	0
count	number	0

---

ProgressIndicatorSkeleton

Usage

Component Group: ProgressIndicator

Import Path

import { ProgressIndicatorSkeleton } from "carbon-components-svelte";

API

No exported props.

---

ProgressIndicator

Usage

Component Group: ProgressIndicator

Import Path

import { ProgressIndicator } from "carbon-components-svelte";

API

Prop name	Type	Default
currentIndex	number	0

---

ProgressStep

Usage

Component Group: ProgressIndicator

Import Path

import { ProgressStep } from "carbon-components-svelte";

API

Prop name	Type	Default
complete	boolean	false
current	boolean	false
disabled	boolean	false
invalid	boolean	false
descripton	string	""
label	string	""
secondaryLabel	string	""
id	string	-

---

RadioButtonSkeleton

Usage

Component Group: RadioButton

Import Path

import { RadioButtonSkeleton } from "carbon-components-svelte";

API

No exported props.

---

RadioButton

Usage

Component Group: RadioButton

Import Path

import { RadioButton } from "carbon-components-svelte";

API

Prop name	Type	Default
value	string	""
checked	boolean	false
disabled	boolean	false
labelPosition	"right" | "left"	"right"
labelText	string	""
hideLabel	boolean	false
id	string	-
name	string	""
ref	null | HTMLInputElement	null

---

RadioButtonGroup

Usage

Component Group: RadioButtonGroup

Import Path

import { RadioButtonGroup } from "carbon-components-svelte";

API

Prop name	Type	Default
selected	string	-
disabled	boolean	false
labelPosition	"right" | "left"	"right"
orientation	"horizontal" | "vertical"	"horizontal"

---

SearchSkeleton

Usage

Component Group: Search

Import Path

import { SearchSkeleton } from "carbon-components-svelte";

API

Prop name	Type	Default
small	boolean	false

---

Search

Usage

Component Group: Search

Import Path

import { Search } from "carbon-components-svelte";

API

Prop name	Type	Default
small	boolean	false
size	"sm" | "lg"	-
skeleton	boolean	false
light	boolean	false
value	string	"text"
type	string	"text"
placeholder	string	"Search..."
autocomplete	"on" | "off"	"off"
autofocus	boolean	false
closeButtonLabelText	string	"Clear search input"
labelText	string	""
id	string	-
ref	null | HTMLInputElement	null

---

SelectSkeleton

Usage

Component Group: Select

Import Path

import { SelectSkeleton } from "carbon-components-svelte";

API

Prop name	Type	Default
hideLabel	boolean	false

---

Select

Usage

Component Group: Select

Import Path

import { Select } from "carbon-components-svelte";

API

Prop name	Type	Default
selected	string	-
size	"sm" | "xl"	-
inline	boolean	false
light	boolean	false
disabled	boolean	false
id	string	-
name	string	-
invalid	boolean	false
invalidText	string	""
helperText	string	""
noLabel	boolean	false
labelText	string	""
hideLabel	boolean	false
ref	null | HTMLSelectElement	null

---

SelectItem

Usage

Component Group: Select

Import Path

import { SelectItem } from "carbon-components-svelte";

API

No exported props.

---

SelectItemGroup

Usage

Component Group: Select

Import Path

import { SelectItemGroup } from "carbon-components-svelte";

API

Prop name	Type	Default
disabled	boolean	false
label	string	"Provide label"

---

SkeletonPlaceholder

Usage

Component Group: SkeletonPlaceholder

Import Path

import { SkeletonPlaceholder } from "carbon-components-svelte";

API

No exported props.

---

SkeletonText

Usage

Component Group: SkeletonText

Import Path

import { SkeletonText } from "carbon-components-svelte";

API

Prop name	Type	Default
lines	number	3
heading	boolean	false
paragraph	boolean	false
width	string	"100%"

---

SliderSkeleton

Usage

Component Group: Slider

Import Path

import { SliderSkeleton } from "carbon-components-svelte";

API

Prop name	Type	Default
hideLabel	boolean	false

---

Slider

Usage

Component Group: Slider

Import Path

import { Slider } from "carbon-components-svelte";

API

Prop name	Type	Default
id	string	-
invalid	boolean	false
labelText	string	""
light	boolean	false
name	string	""
ref	null | HTMLElement	null

---

StructuredListSkeleton

Usage

Component Group: StructuredList

Import Path

import { StructuredListSkeleton } from "carbon-components-svelte";

API

Prop name	Type	Default
rows	number	5
border	boolean	false

---

StructuredList

Usage

Component Group: StructuredList

Import Path

import { StructuredList } from "carbon-components-svelte";

API

Prop name	Type	Default
selected	string	-
border	boolean	false
selection	boolean	false

---

StructuredListBody

Usage

Component Group: StructuredList

Import Path

import { StructuredListBody } from "carbon-components-svelte";

API

No exported props.

---

StructuredListCell

Usage

Component Group: StructuredList

Import Path

import { StructuredListCell } from "carbon-components-svelte";

API

Prop name	Type	Default
head	boolean	false
noWrap	boolean	false

---

StructuredListHead

Usage

Component Group: StructuredList

Import Path

import { StructuredListHead } from "carbon-components-svelte";

API

No exported props.

---

StructuredListInput

Usage

Component Group: StructuredList

Import Path

import { StructuredListInput } from "carbon-components-svelte";

API

Prop name	Type	Default
checked	boolean	false
title	string	"title"
value	string	"value"
id	string	-
name	string	""
ref	null | HTMLInputElement	null

---

StructuredListRow

Usage

Component Group: StructuredList

Import Path

import { StructuredListRow } from "carbon-components-svelte";

API

Prop name	Type	Default
head	boolean	false
label	boolean	false
tabindex	string	"0"

---

Tab

Usage

Component Group: Tabs

Import Path

import { Tab } from "carbon-components-svelte";

API

Prop name	Type	Default
label	string	""
href	string	"#"
disabled	boolean	false
tabindex	string	"0"
id	string	-
ref	null | HTMLAnchorElement	null

---

TabContent

Usage

Component Group: Tabs

Import Path

import { TabContent } from "carbon-components-svelte";

API

Prop name	Type	Default
id	string	-

---

Tabs

Usage

Component Group: Tabs

Import Path

import { Tabs } from "carbon-components-svelte";

API

Prop name	Type	Default
selected	number	0
type	"default" | "container"	"default"
iconDescription	string	"Expand/Collapse"
triggerHref	string	"#"

---

TabsSkeleton

Usage

Component Group: Tabs

Import Path

import { TabsSkeleton } from "carbon-components-svelte";

API

Prop name	Type	Default
count	number	4

---

TagSkeleton

Usage

Component Group: Tag

Import Path

import { TagSkeleton } from "carbon-components-svelte";

API

No exported props.

---

Tag

Usage

Component Group: Tag

Import Path

import { Tag } from "carbon-components-svelte";

API

Prop name	Type	Default
type	"red" | "magenta" | "purple" | "blue" | "cyan" | "teal" | "green" | "gray" | "cool-gray" | "warm-gray" | "high-contrast"	-
filter	boolean	false
disabled	boolean	false
skeleton	boolean	false
title	string	"Clear filter"
id	string	-

---

TextAreaSkeleton

Usage

Component Group: TextArea

Import Path

import { TextAreaSkeleton } from "carbon-components-svelte";

API

Prop name	Type	Default
hideLabel	boolean	false

---

TextArea

Usage

Component Group: TextArea

Import Path

import { TextArea } from "carbon-components-svelte";

API

Prop name	Type	Default
value	string	""
placeholder	string	""
cols	number	50
rows	number	4
light	boolean	false
disabled	boolean	false
helperText	string	""
labelText	string	""
hideLabel	boolean	false
invalid	boolean	false
invalidText	string	""
id	string	-
name	string	-
ref	null | HTMLTextAreaElement	null

---

PasswordInput

Usage

Component Group: TextInput

Import Path

import { PasswordInput } from "carbon-components-svelte";

API

Prop name	Type	Default
size	"sm" | "xl"	-
value	string	""
type	string	"password"
placeholder	string	""
hidePasswordLabel	string	"Hide password"
showPasswordLabel	string	"Show password"
tooltipAlignment	"start" | "center" | "end"	"center"
tooltipPosition	"top" | "right" | "bottom" | "left"	"bottom"
light	boolean	false
disabled	boolean	false
helperText	string	""
labelText	string	""
hideLabel	boolean	false
invalid	boolean	false
invalidText	string	""
id	string	-
name	string	-
ref	null | HTMLInputElement	null

---

TextInputSkeleton

Usage

Component Group: TextInput

Import Path

import { TextInputSkeleton } from "carbon-components-svelte";

API

Prop name	Type	Default
hideLabel	boolean	false

---

TextInput

Usage

Component Group: TextInput

Import Path

import { TextInput } from "carbon-components-svelte";

API

Prop name	Type	Default
size	"sm" | "xl"	-
value	string	""
type	string	""
placeholder	string	""
light	boolean	false
disabled	boolean	false
helperText	string	""
id	string	-
name	string	-
labelText	string	""
hideLabel	boolean	false
invalid	boolean	false
invalidText	string	""
ref	null | HTMLInputElement	null

---

ClickableTile

Usage

Component Group: Tile

Import Path

import { ClickableTile } from "carbon-components-svelte";

API

Prop name	Type	Default
clicked	boolean	false
light	boolean	false

---

ExpandableTile

Usage

Component Group: Tile

Import Path

import { ExpandableTile } from "carbon-components-svelte";

API

Prop name	Type	Default
expanded	boolean	false
light	boolean	false
tileMaxHeight	number	0
tilePadding	number	0
tileCollapsedIconText	string	"Interact to expand Tile"
tileExpandedIconText	string	"Interact to collapse Tile"
tabindex	string	"0"
id	string	-
ref	null | HTMLElement	null

---

RadioTile

Usage

Component Group: Tile

Import Path

import { RadioTile } from "carbon-components-svelte";

API

Prop name	Type	Default
checked	boolean	false
light	boolean	false
value	string	""
tabindex	string	"0"
iconDescription	string	"Tile checkmark"
id	string	-
name	string	""

---

SelectableTile

Usage

Component Group: Tile

Import Path

import { SelectableTile } from "carbon-components-svelte";

API

Prop name	Type	Default
selected	boolean	false
light	boolean	false
title	string	"title"
value	string	"value"
tabindex	string	"0"
iconDescription	string	"Tile checkmark"
id	string	-
name	string	""
ref	null | HTMLInputElement	null

---

Tile

Usage

Component Group: Tile

Import Path

import { Tile } from "carbon-components-svelte";

API

Prop name	Type	Default
light	boolean	false

---

TileGroup

Usage

Component Group: Tile

Import Path

import { TileGroup } from "carbon-components-svelte";

API

Prop name	Type	Default
selected	string	-
disabled	boolean	false
legend	string	-

---

TimePicker

Usage

Component Group: TimePicker

Import Path

import { TimePicker } from "carbon-components-svelte";

API

Prop name	Type	Default
value	string	""
type	string	"text"
placeholder	string	"hh=mm"
pattern	string	"(1[012]
maxLength	number	5
light	boolean	false
disabled	boolean	false
labelText	string	""
hideLabel	boolean	false
invalid	boolean	false
invalidText	string	"Invalid time format."
id	string	-
name	string	-
ref	null | HTMLInputElement	null

---

TimePickerSelect

Usage

Component Group: TimePicker

Import Path

import { TimePickerSelect } from "carbon-components-svelte";

API

Prop name	Type	Default
value	string	""
disabled	boolean	false
iconDescription	string	"Expand/Collapse"
labelText	string	""
hideLabel	boolean	false
id	string	-
name	string	-
ref	null | HTMLSelectElement	null

---

ToggleSkeleton

Usage

Component Group: Toggle

Import Path

import { ToggleSkeleton } from "carbon-components-svelte";

API

Prop name	Type	Default
labelText	string	""
id	string	-

---

Toggle

Usage

Component Group: Toggle

Import Path

import { Toggle } from "carbon-components-svelte";

API

Prop name	Type	Default
toggled	boolean	false
disabled	boolean	false
labelA	string	"Off"
labelB	string	"On"
labelText	string	""
id	string	-
name	string	-

---

ToggleSmallSkeleton

Usage

Component Group: ToggleSmall

Import Path

import { ToggleSmallSkeleton } from "carbon-components-svelte";

API

Prop name	Type	Default
labelText	string	""
id	string	-

---

ToggleSmall

Usage

Component Group: ToggleSmall

Import Path

import { ToggleSmall } from "carbon-components-svelte";

API

Prop name	Type	Default
toggled	boolean	false
disabled	boolean	false
labelA	string	"Off"
labelB	string	"On"
labelText	string	""
id	string	-
name	string	-

---

Tooltip

Usage

Component Group: Tooltip

Import Path

import { Tooltip } from "carbon-components-svelte";

API

Prop name	Type	Default
direction	"top" | "right" | "bottom" | "left"	"bottom"
open	boolean	false
hideIcon	boolean	false
icon	typeof import("carbon-icons-svelte/lib/Add16").default	Information16
iconDescription	string	""
iconName	string	""
tabindex	string	"0"
tooltipId	string	-
triggerId	string	-
triggerText	string	""
ref	null | HTMLElement	null

---

TooltipDefinition

Usage

Component Group: TooltipDefinition

Import Path

import { TooltipDefinition } from "carbon-components-svelte";

API

Prop name	Type	Default
tooltipText	string	""
align	"start" | "center" | "end"	"center"
direction	"top" | "bottom"	"bottom"
id	string	-
ref	null | HTMLButtonElement	null

---

TooltipIcon

Usage

Component Group: TooltipIcon

Import Path

import { TooltipIcon } from "carbon-components-svelte";

API

Prop name	Type	Default
tooltipText	string	""
align	"start" | "center" | "end"	"center"
direction	"top" | "right" | "bottom" | "left"	"bottom"
id	string	-
ref	null | HTMLButtonElement	null

---

Content

Usage

Component Group: UIShell

Import Path

import { Content } from "carbon-components-svelte";

API

Prop name	Type	Default
id	string	"main-content"

---

SkipToContent

Usage

Component Group: UIShell

Import Path

import { SkipToContent } from "carbon-components-svelte";

API

Prop name	Type	Default
href	string	"#main-content"
tabindex	string	"0"

---

UnorderedList

Usage

Component Group: UnorderedList

Import Path

import { UnorderedList } from "carbon-components-svelte";

API

Prop name	Type	Default
nested	boolean	false

---

Header

Usage

Component Group: UIShell

Import Path

import { Header } from "carbon-components-svelte";

API

Prop name	Type	Default
isSideNavOpen	boolean	false
uiShellAriaLabel	string	-
href	string	-
company	string	-
platformName	string	-

---

HeaderAction

Usage

Component Group: UIShell

Import Path

import { HeaderAction } from "carbon-components-svelte";

API

Prop name	Type	Default
isOpen	boolean	false
icon	{ render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }	-
text	string	-
ref	null | HTMLButtonElement	null

---

HeaderActionLink

Usage

Component Group: UIShell

Import Path

import { HeaderActionLink } from "carbon-components-svelte";

API

Prop name	Type	Default
linkIsActive	boolean	false
href	string	-
icon	{ render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }	-

---

HeaderActionSearch

Usage

Component Group: UIShell

Import Path

import { HeaderActionSearch } from "carbon-components-svelte";

API

Prop name	Type	Default
searchIsActive	boolean	false

---

HeaderNav

Usage

Component Group: UIShell

Import Path

import { HeaderNav } from "carbon-components-svelte";

API

Prop name	Type	Default
ariaLabel	string	-

---

HeaderNavItem

Usage

Component Group: UIShell

Import Path

import { HeaderNavItem } from "carbon-components-svelte";

API

Prop name	Type	Default
href	string	-
text	string	-

---

HeaderNavMenu

Usage

Component Group: UIShell

Import Path

import { HeaderNavMenu } from "carbon-components-svelte";

API

Prop name	Type	Default
expanded	boolean	false
href	string	"/"
text	string	-
iconDescription	string	"Expand/Collapse"

---

HeaderPanelDivider

Usage

Component Group: UIShell

Import Path

import { HeaderPanelDivider } from "carbon-components-svelte";

API

No exported props.

---

HeaderPanelLink

Usage

Component Group: UIShell

Import Path

import { HeaderPanelLink } from "carbon-components-svelte";

API

Prop name	Type	Default
href	string	-

---

HeaderPanelLinks

Usage

Component Group: UIShell

Import Path

import { HeaderPanelLinks } from "carbon-components-svelte";

API

No exported props.

---

HeaderUtilities

Usage

Component Group: UIShell

Import Path

import { HeaderUtilities } from "carbon-components-svelte";

API

No exported props.

---

HamburgerMenu

Usage

Component Group: UIShell

Import Path

import { HamburgerMenu } from "carbon-components-svelte";

API

Prop name	Type	Default
ariaLabel	string	-
isOpen	boolean	false

---

SideNav

Usage

Component Group: UIShell

Import Path

import { SideNav } from "carbon-components-svelte";

API

Prop name	Type	Default
ariaLabel	string	-
isOpen	boolean	false

---

SideNavItems

Usage

Component Group: UIShell

Import Path

import { SideNavItems } from "carbon-components-svelte";

API

No exported props.

---

SideNavLink

Usage

Component Group: UIShell

Import Path

import { SideNavLink } from "carbon-components-svelte";

API

Prop name	Type	Default
isSelected	boolean	false
href	string	-
text	string	-
icon	{ render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }	-

---

SideNavMenu

Usage

Component Group: UIShell

Import Path

import { SideNavMenu } from "carbon-components-svelte";

API

Prop name	Type	Default
expanded	boolean	-
text	string	-
icon	{ render: typeof import("carbon-icons-svelte/lib/Add16").default; skeleton: boolean; }	-

---

SideNavMenuItem

Usage

Component Group: UIShell

Import Path

import { SideNavMenuItem } from "carbon-components-svelte";

API

No exported props.

---

Contributing

Refer to the Contributing guidelines.

Changelog

License

Apache 2.0