Button

Types: elevated, filled, tonal, outlined, text

Optional icon: none, left, full

Props

• display: string
• extraOptions: HTMLButtonAttributes
• iconType: "none" | "left" | "full"
• type: "elevated" | "filled" | "tonal" | "outlined" | "text";
• disabled: boolean

Slots

• default

Examples

<Button type="filled" on:click={() => alert("Hello world!")}>
  Click me
</Button>

ButtonLink

Props

• display: string
• extraOptions: HTMLAnchorAttributes
• iconType: "none" | "left" | "full"
• type: "elevated" | "filled" | "tonal" | "outlined" | "text";
• href: string;

Slots

• default

SegmentedButtonContainer

Props

• display: string
• extraOptions: HTMLAttributes<HTMLDivElement>

Slots

• default

Examples

<SegmentedButtonContainer>
  <input type="radio" name="group" id="tab-a" checked />
  <SegmentedButtonItem input="tab-a">Tab A</SegmentedButtonItem>
  <input type="radio" name="group" id="tab-b" />
  <SegmentedButtonItem input="tab-b">Tab B</SegmentedButtonItem>
</SegmentedButtonContainer>

SegmentedButtonItem

Props

• display: string
• extraOptions: HTMLLabelAttributes
• input: string;
• icon: IconifyIcon | undefined

Slots

• default

FAB

Props

• display: string
• extraOptions: HTMLButtonAttributes
• color: "primary" | "surface" | "secondary" | "tertiary"
• size: "small" | "normal" | "large"
• elevation: "normal" | "lowered" | "none"
• icon: IconifyIcon | undefined
• text: string | undefined

Examples

<FAB
  color="primary"
  size="normal"
  icon={iconEdit}
  text="Hello"
/>

Card

Types: elevated, filled, outlined

Props

• display: string
• extraOptions: HTMLAttributes<HTMLDivElement> & HTMLButtonAttributes
• type: "elevated" | "filled" | "outlined";

Slots

• default

Examples

<Card type="elevated">Hello</Card>
<CardClickable type="elevated">Click me</CardClickable>

CardClickable

Props

• display: string
• extraOptions: HTMLAttributes<HTMLDivElement> & HTMLButtonAttributes
• type: "elevated" | "filled" | "outlined";

Slots

• default

Dialog

Props

• display: string
• extraOptions: HTMLDialogAttributes
• icon: IconifyIcon | undefined
• headline: string;
• open: boolean;
• closeOnEsc: boolean
• closeOnClick: boolean

Slots

• default
• buttons

Examples

<Dialog icon={iconTrash} headline="Delete?" bind:open>
  Delete these items?
  <svelte:fragment slot="buttons">
    <Button type="text" on:click={() => (open = false)}>Cancel</Button>
    <Button type="tonal" on:click={() => (open = false)}>Delete</Button>
  </svelte:fragment>
</Dialog>

Snackbar

Props

• extraWrapperOptions: HTMLAttributes<HTMLDivElement>
• extraOptions: ComponentProps<SnackbarItem>

Examples

<script>
let snackbar: (data: SnackbarIn) => void;
</script>
<Button on:click={() => snackbar({
  message: "Hello",
  actions: { Undo: () => {} },
  closable: true
})}>Show</Button>
<Snackbar bind:show={snackbar} />

Tips

Set the CSS variable `--m3-util-bottom-offset` to a size to move all snackbars upwards.

SnackbarAnim

Props

• extraWrapperOptions: HTMLAttributes<HTMLDivElement>
• extraOptions: ComponentProps<SnackbarItem>

SnackbarItem

Props

• display: string
• extraOptions: HTMLAttributes<HTMLDivElement>

Slots

• default

BottomSheet

Slots

• default

ListItem

Props

• display: string
• extraOptions: HTMLAttributes<HTMLDivElement>
• overline: string
• headline: string
• supporting: string
• lines: number | undefined

Slots

• leading
• trailing

ListItemButton

Props

• display: string
• extraOptions: HTMLButtonAttributes
• overline: string
• headline: string
• supporting: string
• lines: number | undefined

Slots

• leading
• trailing

ListItemLabel

Props

• display: string
• extraOptions: HTMLLabelAttributes
• overline: string
• headline: string
• supporting: string
• lines: number | undefined

Slots

• leading
• trailing

Menu

Props

• display: string

Slots

• default

Examples

<Menu>
  <MenuItem icon={iconUndo}>Undo</MenuItem>
  <MenuItem icon={iconRedo} disabled>Redo</MenuItem>
</Menu>

MenuItem

Props

• icon: IconifyIcon | "space" | undefined
• disabled: boolean

Slots

• default

LinearProgress

Props

• display: string
• extraOptions: HTMLAttributes<HTMLDivElement>
• percent: number;

LinearProgressIndeterminate

Props

• display: string
• extraOptions: HTMLAttributes<HTMLDivElement>

CircularProgress

Props

• display: string
• extraOptions: HTMLAttributes<SVGElement>
• percent: number;

CircularProgressIndeterminate

Props

• display: string
• extraOptions: HTMLAttributes<SVGElement>

Checkbox

Props

• display: string
• extraOptions: HTMLAttributes<HTMLDivElement>

Slots

• default

CheckboxAnim

Props

• display: string
• extraOptions: HTMLAttributes<HTMLDivElement>

Slots

• default

Switch

Props

• display: string
• extraWrapperOptions: HTMLAttributes<HTMLDivElement>
• extraOptions: HTMLAttributes<HTMLDivElement>
• checked: boolean
• disabled: boolean

Examples

<Switch bind:checked />

Slider

Props

• extraWrapperOptions: HTMLAttributes<HTMLDivElement>
• extraOptions: HTMLInputAttributes
• value: number;
• min: number
• max: number
• step: number | "any"
• disabled: boolean
• showValue: boolean
• format: (n: number)

Examples

<Slider step="any" bind:value />
<SliderTicks step={1} max={6} bind:value />

TextField

Props

• display: string
• extraWrapperOptions: HTMLAttributes<HTMLDivElement>
• extraOptions: HTMLInputAttributes
• name: string;
• leadingIcon: IconifyIcon | undefined
• trailingIcon: IconifyIcon | undefined
• disabled: boolean
• required: boolean
• error: boolean
• value: string

Examples

<TextField
  name="Field"
  leadingIcon={iconEdit}
  error={false}
  disabled={false}
/>

Tips

For outlined text fields on a surface that isn't the default background, set the CSS variable `--m3-util-background` to the current background make the text field fit in.

DatePickerDocked

Props

• display: string
• date: string
• clearable: boolean;
• focusedMonth: number
• dateValidator: (date: string)

Chip

Props

• display: string
• extraOptions: HTMLButtonAttributes
• type: "input" | "assist" | "general";
• icon: IconifyIcon | null
• trailingIcon: IconifyIcon | null
• elevated: boolean
• disabled: boolean
• selected: boolean

Slots

• default

NavDrawer

Props

• display: string
• extraOptions: HTMLAttributes<HTMLElement>

Slots

• default

NavDrawerButton

Props

• selected: boolean;
• extraOptions: HTMLButtonAttributes
• icon: IconifyIcon;

Slots

• default

NavDrawerLink

Props

• href: string;
• selected: boolean;
• extraOptions: HTMLAnchorAttributes
• icon: IconifyIcon;

Slots

• default

NavList

Props

• display: string
• extraOptions: HTMLAttributes<HTMLElement>
• type: "rail" | "bar" | "auto";

Slots

• default

NavListButton

Props

• display: string
• extraOptions: HTMLButtonAttributes
• type: "rail" | "bar" | "auto";
• selected: boolean;
• icon: IconifyIcon;

Slots

• default

NavListLink

Props

• display: string
• extraOptions: HTMLAnchorAttributes
• type: "rail" | "bar" | "auto";
• href: string;
• selected: boolean;
• icon: IconifyIcon;

Slots

• default

Tabs

Props

• display: string
• extraWrapperOptions: HTMLAttributes<HTMLDivElement>
• extraOptions: HTMLInputAttributes
• secondary: boolean
• tab: string;
• items: {

Examples

<Tabs bind:tab secondary={false} items={[
  { name: "Tab 1", value: "tab1" },
  { name: "Tab 2", value: "tab2" }
]} />

TabsLink

Props

• display: string
• extraWrapperOptions: HTMLAttributes<HTMLDivElement>
• extraOptions: HTMLAnchorAttributes
• secondary: boolean
• tab: string;
• items: {

VariableTabs

Props

• display: string
• extraWrapperOptions: HTMLAttributes<HTMLDivElement>
• extraOptions: HTMLInputAttributes
• secondary: boolean
• tab: string;
• items: {

VariableTabsLink

Props

• display: string
• extraWrapperOptions: HTMLAttributes<HTMLDivElement>
• extraOptions: HTMLAnchorAttributes
• secondary: boolean
• tab: string;
• items: {

ChipChooser

Props

• options: { label: string; value: string; icon?: IconifyIcon }[];
• chosenOptions: string[]

Divider

Props

• inset: boolean

DateField

Props

• name: string;
• date: string
• required: boolean
• disabled: boolean
• extraOptions: HTMLInputAttributes

Examples

<DateField name="Date" bind:date />

Tips

This component is like DatePickerDocked but it has a field and it's easier to use

StyleFromScheme

Props

• lightScheme: SerializedScheme;
• darkScheme: SerializedScheme;

Layer