Types
Types
Type glossary
"automatic" | "manual"
"automatic" | "manual"
"static" | "dynamic"
"static" | "dynamic"
"left" | "center" | "full-width"
"left" | "center" | "full-width"
"inline" | "list" | undefined
"inline" | "list" | undefined
"polite" | "assertive" | "off"
"polite" | "assertive" | "off"
"on" | "off" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo"
"on" | "off" | "name" | "honorific-prefix" | "given-name" | "additional-name" | "family-name" | "honorific-suffix" | "nickname" | "email" | "username" | "new-password" | "current-password" | "one-time-code" | "organization-title" | "organization" | "street-address" | "address-line1" | "address-line2" | "address-line3" | "address-level4" | "address-level3" | "address-level2" | "address-level1" | "country" | "country-name" | "postal-code" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-family-name" | "cc-number" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-csc" | "cc-type" | "transaction-currency" | "transaction-amount" | "language" | "bday" | "bday-day" | "bday-month" | "bday-year" | "sex" | "tel" | "tel-country-code" | "tel-national" | "tel-area-code" | "tel-local" | "tel-extension" | "impp" | "url" | "photo"
"on" | "off"
"on" | "off"
"left" | "center" | "right"
"default" | "icon"
"far" | "near" | "inline"
"dot" | "text" | "icon"
IcStatusVariants | "light" | "custom"
{
relatedTarget: IcRelatedTarget | null;
}
{
relatedTarget: IcRelatedTarget | null;
}
{
mode: IcBrandForeground;
color: IcColorRGB;
}
{
mode: IcBrandForeground;
color: IcColorRGB;
}
"default" | "dark" | "light"
"default" | "dark" | "light"
"top" | "right" | "bottom" | "left"
"top" | "right" | "bottom" | "left"
"reset" | "submit" | "button"
"reset" | "submit" | "button"
"primary" | "secondary" | "tertiary" | "destructive" | "icon" | "icon-primary" | "icon-secondary" | "icon-tertiary" | "icon-destructive"
"primary" | "secondary" | "tertiary" | "destructive" | "icon" | "icon-primary" | "icon-secondary" | "icon-tertiary" | "icon-destructive"
"default" | "spacious"
{
value: string[];
checkedOptions: {
checkbox: HTMLIcCheckboxElement;
textFieldValue?: string;
}[];
selectedOption: HTMLIcCheckboxElement;
}
{
value: string;
selectedOption: {
radio: HTMLIcRadioOptionElement;
textFieldValue?: string;
};
}
{
value: number;
}
{
checked: boolean[] | boolean;
toggledOptions?: {
toggleButton: HTMLIcToggleButtonElement;
}[];
selectedOption: HTMLIcToggleButtonElement;
}
{
value: number;
}
{
value: string;
selectedOption: {
radio: HTMLIcRadioOptionElement;
textFieldValue?: string;
};
}
{
checked: boolean[] | boolean;
toggledOptions?: {
toggleButton: HTMLIcToggleButtonElement;
}[];
selectedOption: HTMLIcToggleButtonElement;
}
RGB | RGBA | HEX
RGB | RGBA | HEX
{
key: string;
title: string;
dataType: IcDataTableColumnDataTypes;
columnAlignment?: IcDataTableAlignmentOptions;
columnWidth?: string | IcDataTableColumnWidthTypes;
textWrap?: boolean;
cellAlignment?: string;
emphasis?: string;
colspan?: number;
icon?: {
icon: string;
onAllCells?: boolean;
hideOnHeader?: boolean;
};
excludeColumnFromSort?: boolean;
hidden?: boolean;
disableAutoSort?: boolean;
}
{
[key: string]: any;
rowOptions?: IcDataTableRowOptions;
}
"default" | "dense" | "spacious"
number | "auto"
"unsorted" | "ascending" | "descending"
"tooltip" | "show-hide" | undefined
"DD/MM/YYYY" | "MM/DD/YYYY" | "YYYY/MM/DD"
string | Date | null | undefined
{
value: IcDataTableDensityOptions;
}
0 | 576 | 768 | 992 | 1200
0 | 576 | 768 | 992 | 1200
{
start: string | Date;
end: string | Date;
}
"left" | "center" | "right" | "top" | "bottom"
"solid" | "dashed"
"thin" | "medium" | "thick" | "very-thick"
"viewport" | "parent"
{
expanded: boolean;
}
"filled" | "outlined"
"filled" | "outlined"
"left" | "center" | "right"
"left" | "center" | "right"
{
sideNavExpanded: boolean;
sideNavMobile: boolean;
}
{
sideNavExpanded: boolean;
sideNavMobile: boolean;
}
"extra small" | "small" | "medium" | "large" | "extra large"
"extra small" | "small" | "medium" | "large" | "extra large"
{
xs?: number;
sm?: number;
md?: number;
lg?: number;
xl?: number;
}
"fluid" | "fixed"
"left" | "center"
"left" | "right" | "top"
"left" | "right" | "top"
"warning" | "error" | "success" | ""
"warning" | "error" | "success" | ""
{
value: number;
isUserAction?: boolean;
}
{
value: number;
isUserAction?: boolean;
}
"medium" | "small" | "large" | "icon"
"medium" | "small" | "large" | "icon"
"circular" | "linear"
"circular" | "linear"
{
open: boolean;
focusInput?: boolean;
}
{
open: boolean;
focusInput?: boolean;
}
"toggle" | "destructive" | "default"
"toggle" | "destructive" | "default"
{
description?: string;
disabled?: boolean;
recommended?: boolean;
children?: IcMenuOption[];
loading?: boolean;
timedOut?: boolean;
[key: string]: any;
element?: {
component: any;
ariaLabel: string;
};
icon?: any;
hideLabel?: boolean;
htmlProps?: Record<string, any>;
}
{
description?: string;
disabled?: boolean;
recommended?: boolean;
children?: IcMenuOption[];
loading?: boolean;
timedOut?: boolean;
[key: string]: any;
element?: {
component: any;
ariaLabel: string;
};
icon?: any;
hideLabel?: boolean;
htmlProps?: Record<string, any>;
}
{
optionId: string | undefined;
}
{
optionId: string | undefined;
}
{
value: string | string[] | null;
keyPressed?: string;
}
{
value: string | string[] | null;
keyPressed?: string;
}
{
expanded: boolean;
}
{
source: HTMLElement;
}
{
value: string | undefined;
label?: string;
optionId?: string;
}
{
value: string | undefined;
label?: string;
optionId?: string;
}
"horizontal" | "vertical"
"horizontal" | "vertical"
{
value: number;
fromItemsPerPage?: boolean;
}
{
value: number;
fromItemsPerPage?: boolean;
}
"left" | "right" | "space-between"
"left" | "right" | "space-between"
{
alignment?: IcPaginationAlignmentOptions;
hideAllFromItemsPerPage?: boolean;
hideCurrentPage?: boolean;
hideFirstAndLastPageButton?: boolean;
hideRangeLabel?: boolean;
itemLabel?: string;
itemsPerPageOptions?: { label: string; value: string }[];
monochrome?: boolean;
pageLabel?: string;
rangeLabelType?: IcPaginationLabelTypes;
selectedItemsPerPage?: number;
selectItemsPerPageOnEnter?: boolean;
setToFirstPageOnPaginationChange?: boolean;
showGoToPageControl?: boolean;
showItemsPerPageControl?: boolean;
theme?: IcThemeMode;
type?: IcPaginationTypes;
}
"page" | "ellipsis" | "simple-current"
"page" | "ellipsis" | "simple-current"
"page" | "data"
"page" | "data"
"simple" | "complex"
"simple" | "complex"
"top" | "right" | "bottom" | "left"
"top" | "right"
"default" | "official" | "official-sensitive" | "secret" | "top-secret"
{
relatedTarget: IcRelatedTarget | null;
}
{
relatedTarget: IcRelatedTarget | null;
}
"navigation" | "query"
"navigation" | "query"
"start" | "anywhere"
"start" | "anywhere"
"auto" | "manual"
"auto" | "manual"
IcSelectOptionBase | IcSelectOptionGroup | IcSelectOptionLoading | IcSelectOptionTimedOut
IcSelectOptionBase | IcSelectOptionGroup | IcSelectOptionLoading | IcSelectOptionTimedOut
"single" | "multi"
"single" | "multi"
"medium" | "large" | "small"
"medium" | "large" | "small"
"medium" | "small"
"medium" | "small"
"rectangle" | "text" | "circle"
{
columnName: string;
sorted: IcDataTableSortOrderOptions;
}
"neutral" | "success" | "warning" | "danger"
"neutral" | "info" | "warning" | "error" | "success" | "ai"
{
next: string;
step: string;
steps: string;
of: string;
lastStep: string;
completed: string;
notRequired: string;
required: string;
optional: string;
}
"left" | "full-width"
"optional" | "required"
"active" | "current" | "completed" | "disabled"
"default" | "compact"
{
value: string | null;
checked: boolean;
}
{
value: string | null;
checked: boolean;
}
{
tabId: string;
contextId: string;
position: number;
}
{
tabId: string;
contextId: string;
position: number;
}
{
tabIndex: number;
tabLabel: string;
}
{
tabIndex: number;
tabLabel: string;
}
"none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search"
"none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search"
{
event: KeyboardEvent;
cursorPosition: number;
selectionEnd: number;
}
{
event: KeyboardEvent;
cursorPosition: number;
selectionEnd: number;
}
"email" | "password" | "tel" | "text" | "url" | "number" | "search"
"email" | "password" | "tel" | "text" | "url" | "number" | "search"
"dark" | "light" | "inherit"
"dark" | "light" | "inherit"
"dark" | "light" | "system"
"dark" | "light" | "system"
"HH:MM" | "HH:MM:SS" | "HH:MM:SS.SSS"
"AM" | "PM"
"top-start" | "top" | "top-end" | "right-start" | "right" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left" | "left-start"
"top-start" | "top" | "top-end" | "right-start" | "right" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left" | "left-start"
{
label: string;
icon?: string;
children?: IcTreeItemOptions[];
disabled?: boolean;
expanded?: boolean;
href?: string;
selected?: boolean;
treeItemId?: string;
theme?: IcThemeMode;
truncateTreeItem?: boolean;
}
"h1" | "h2" | "h3" | "h4" | "subtitle-large" | "subtitle-small" | "body" | "label" | "label-uppercase" | "caption" | "caption-uppercase" | "code-large" | "code-small" | "code-extra-small" | "badge" | "badge-small"
"h1" | "h2" | "h3" | "h4" | "subtitle-large" | "subtitle-small" | "body" | "label" | "label-uppercase" | "caption" | "caption-uppercase" | "code-large" | "code-small" | "code-extra-small" | "badge" | "badge-small"
"default" | "polite" | "assertive" | "off"
"default" | "polite" | "assertive" | "off"
{
value: string;
keyPressed?: string;
}
{
value: string;
keyPressed?: string;
}
{
Sunday = 0,
Monday = 1,
Tuesday = 2,
Wednesday = 3,
Thursday = 4,
Friday = 5,
Saturday = 6,
}
any