carbon-components-svelte
Advanced tools
Svelte implementation of the Carbon Design System
carbon-components-svelte can be installed as a development dependency.
yarn add -D carbon-components-svelte
<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>
147 components exported from "carbon-components-svelte"
Component Group: Accordion
Import Path
import { AccordionSkeleton } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| count | number | 4 |
| open | boolean | true |
Component Group: Accordion
Import Path
import { Accordion } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| align | "start" | "end" | "end" |
| skeleton | boolean | false |
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" |
Component Group: Breadcrumb
Import Path
import { BreadcrumbSkeleton } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| noTrailingSlash | boolean | false |
| count | number | 3 |
Component Group: Breadcrumb
Import Path
import { Breadcrumb } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| noTrailingSlash | boolean | false |
| skeleton | boolean | false |
Component Group: Breadcrumb
Import Path
import { BreadcrumbItem } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| href | string | - |
| isCurrentPage | boolean | false |
Component Group: Button
Import Path
import { ButtonSkeleton } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| href | string | - |
| small | boolean | false |
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 |
Component Group: Checkbox
Import Path
import { CheckboxSkeleton } from "carbon-components-svelte";
API
No exported props.
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 |
Component Group: CodeSnippet
Import Path
import { CodeSnippetSkeleton } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| type | "single" | "inline" | "multi" | "single" |
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 |
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 |
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 |
Component Group: ComposedModal
Import Path
import { ModalBody } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| hasForm | boolean | false |
| hasScrollingContent | boolean | false |
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 |
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" |
Component Group: ContentSwitcher
Import Path
import { ContentSwitcher } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| selectedIndex | number | 0 |
| light | boolean | false |
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 |
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 |
Component Group: CopyButton
Import Path
import { CopyButton } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| iconDescription | string | "Copy to clipboard" |
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 |
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 |
Component Group: DataTable
Import Path
import { TableBody } from "carbon-components-svelte";
API
No exported props.
Component Group: DataTable
Import Path
import { TableCell } from "carbon-components-svelte";
API
No exported props.
Component Group: DataTable
Import Path
import { TableContainer } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| title | string | "" |
| description | string | "" |
| stickyHeader | boolean | false |
Component Group: DataTable
Import Path
import { TableHead } from "carbon-components-svelte";
API
No exported props.
Component Group: DataTable
Import Path
import { TableHeader } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| scope | string | "col" |
| translateWithId | () => string | () => "" |
| id | string | - |
Component Group: DataTable
Import Path
import { TableRow } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| isSelected | boolean | false |
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[] | [] |
Component Group: DatePicker
Import Path
import { DatePickerSkeleton } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| range | boolean | false |
| id | string | - |
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 | - |
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 |
Component Group: Dropdown
Import Path
import { DropdownSkeleton } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| inline | boolean | false |
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 |
Component Group: FileUploader
Import Path
import { FileUploaderSkeleton } from "carbon-components-svelte";
API
No exported props.
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 | - |
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 |
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 |
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 | "" |
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 |
Component Group: Form
Import Path
import { Form } from "carbon-components-svelte";
API
No exported props.
Component Group: FormGroup
Import Path
import { FormGroup } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| invalid | boolean | false |
Component Group: FormItem
Import Path
import { FormItem } from "carbon-components-svelte";
API
No exported props.
Component Group: FormLabel
Import Path
import { FormLabel } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| id | string | - |
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 | - |
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 |
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 |
Component Group: Icon
Import Path
import { IconSkeleton } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| size | number | 16 |
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 |
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 |
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 |
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 | "" |
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 |
Component Group: ListBox
Import Path
import { ListBoxMenu } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| id | string | - |
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 |
Component Group: ListBox
Import Path
import { ListBoxMenuItem } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| active | boolean | false |
| highlighted | boolean | false |
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 |
Component Group: ListItem
Import Path
import { ListItem } from "carbon-components-svelte";
API
No exported props.
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 | - |
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 |
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 | - |
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" |
Component Group: Notification
Import Path
import { NotificationActionButton } from "carbon-components-svelte";
API
No exported props.
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" |
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" |
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" |
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 |
Component Group: NumberInput
Import Path
import { NumberInputSkeleton } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| hideLabel | boolean | false |
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 |
Component Group: OrderedList
Import Path
import { OrderedList } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| nested | boolean | false |
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 | - |
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 |
Component Group: Pagination
Import Path
import { PaginationSkeleton } from "carbon-components-svelte";
API
No exported props.
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 | - |
Component Group: PaginationNav
Import Path
import { PaginationItem } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| page | number | 0 |
| active | boolean | false |
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" |
Component Group: PaginationNav
Import Path
import { PaginationOverflow } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| fromIndex | number | 0 |
| count | number | 0 |
Component Group: ProgressIndicator
Import Path
import { ProgressIndicatorSkeleton } from "carbon-components-svelte";
API
No exported props.
Component Group: ProgressIndicator
Import Path
import { ProgressIndicator } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| currentIndex | number | 0 |
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 | - |
Component Group: RadioButton
Import Path
import { RadioButtonSkeleton } from "carbon-components-svelte";
API
No exported props.
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 |
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" |
Component Group: Search
Import Path
import { SearchSkeleton } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| small | boolean | false |
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 |
Component Group: Select
Import Path
import { SelectSkeleton } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| hideLabel | boolean | false |
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 |
Component Group: Select
Import Path
import { SelectItem } from "carbon-components-svelte";
API
No exported props.
Component Group: Select
Import Path
import { SelectItemGroup } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| disabled | boolean | false |
| label | string | "Provide label" |
Component Group: SkeletonPlaceholder
Import Path
import { SkeletonPlaceholder } from "carbon-components-svelte";
API
No exported props.
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%" |
Component Group: Slider
Import Path
import { SliderSkeleton } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| hideLabel | boolean | false |
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 |
Component Group: StructuredList
Import Path
import { StructuredListSkeleton } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| rows | number | 5 |
| border | boolean | false |
Component Group: StructuredList
Import Path
import { StructuredList } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| selected | string | - |
| border | boolean | false |
| selection | boolean | false |
Component Group: StructuredList
Import Path
import { StructuredListBody } from "carbon-components-svelte";
API
No exported props.
Component Group: StructuredList
Import Path
import { StructuredListCell } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| head | boolean | false |
| noWrap | boolean | false |
Component Group: StructuredList
Import Path
import { StructuredListHead } from "carbon-components-svelte";
API
No exported props.
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 |
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" |
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 |
Component Group: Tabs
Import Path
import { TabContent } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| id | string | - |
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 | "#" |
Component Group: Tabs
Import Path
import { TabsSkeleton } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| count | number | 4 |
Component Group: Tag
Import Path
import { TagSkeleton } from "carbon-components-svelte";
API
No exported props.
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 | - |
Component Group: TextArea
Import Path
import { TextAreaSkeleton } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| hideLabel | boolean | false |
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 |
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 |
Component Group: TextInput
Import Path
import { TextInputSkeleton } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| hideLabel | boolean | false |
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 |
Component Group: Tile
Import Path
import { ClickableTile } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| clicked | boolean | false |
| light | boolean | false |
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 |
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 | "" |
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 |
Component Group: Tile
Import Path
import { Tile } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| light | boolean | false |
Component Group: Tile
Import Path
import { TileGroup } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| selected | string | - |
| disabled | boolean | false |
| legend | string | - |
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 |
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 |
Component Group: Toggle
Import Path
import { ToggleSkeleton } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| labelText | string | "" |
| id | string | - |
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 | - |
Component Group: ToggleSmall
Import Path
import { ToggleSmallSkeleton } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| labelText | string | "" |
| id | string | - |
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 | - |
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 |
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 |
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 |
Component Group: UIShell
Import Path
import { Content } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| id | string | "main-content" |
Component Group: UIShell
Import Path
import { SkipToContent } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| href | string | "#main-content" |
| tabindex | string | "0" |
Component Group: UnorderedList
Import Path
import { UnorderedList } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| nested | boolean | false |
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 | - |
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 |
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; } | - |
Component Group: UIShell
Import Path
import { HeaderActionSearch } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| searchIsActive | boolean | false |
Component Group: UIShell
Import Path
import { HeaderNav } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| ariaLabel | string | - |
Component Group: UIShell
Import Path
import { HeaderNavItem } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| href | string | - |
| text | string | - |
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" |
Component Group: UIShell
Import Path
import { HeaderPanelDivider } from "carbon-components-svelte";
API
No exported props.
Component Group: UIShell
Import Path
import { HeaderPanelLink } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| href | string | - |
Component Group: UIShell
Import Path
import { HeaderPanelLinks } from "carbon-components-svelte";
API
No exported props.
Component Group: UIShell
Import Path
import { HeaderUtilities } from "carbon-components-svelte";
API
No exported props.
Component Group: UIShell
Import Path
import { HamburgerMenu } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| ariaLabel | string | - |
| isOpen | boolean | false |
Component Group: UIShell
Import Path
import { SideNav } from "carbon-components-svelte";
API
| Prop name | Type | Default |
|---|---|---|
| ariaLabel | string | - |
| isOpen | boolean | false |
Component Group: UIShell
Import Path
import { SideNavItems } from "carbon-components-svelte";
API
No exported props.
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; } | - |
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; } | - |
Component Group: UIShell
Import Path
import { SideNavMenuItem } from "carbon-components-svelte";
API
No exported props.
Refer to the Contributing guidelines.
FAQs
Svelte implementation of the Carbon Design System
The npm package carbon-components-svelte receives a total of 21,719 weekly downloads. As such, carbon-components-svelte popularity was classified as popular.
We found that carbon-components-svelte demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.