<Button />

base/button.svelte

"There were a place where we used to click. You've called it a button, and we clicked yes. R. Falgt, 1354"
R. Falgt, 1354
Component Button examples :
Using slots
component Button demo using slots
size size-preset
height size-preset
density density-preset
loading boolean
showChip boolean
code 

<Button on:click={()=>{}} >
	My button
	<Icon slot="buttonStart" icon="..." />
	<Icon slot="buttonEnd" icon="..." />
</Button>
Styling props
bgTheme none
bgTheme primary
bgTheme secondary
bgTheme tertiary
color color-preset
naked boolean
contained boolean
bordered boolean
link boolean
Menu buttons
position position
Using props
component Button demo using props
icon icon
iconSize size-preset
iconColor color
primary string
secondary string
size size-preset
height size-preset
density density-preset
loading boolean
showChip boolean
code 

<Button on:click={()=>{}} >
	My button
</Button>
Menu buttons
position position
code 

const usePopper: UsePopperProps = {
  component: Debug,
  componentProps: {
    title: "title box",
    content: "content",
  },
};

<Button
  size="medium"
  usePopper={{ ...usePopper, position: activeParams?.position }}
  primary="Menu {activeParams?.position ?? ''}"
/>
Api preview :
__propDef: {
    props: {
        [x: string]: any;
        presetDefault?: string | undefined;
        class?: string | undefined;
        element?: HTMLButtonElement | null | undefined;
        type?: string | undefined;
        icon?: string | undefined;
        iconFamily?: string | undefined;
        iconColor?: string | undefined;
        endIcon?: string | undefined;
        endIconColor?: string | undefined;
        endIconSize?: string | undefined;
        bgTheme?: string | undefined;
        usePopper?: UsePopperProps | undefined;
        loading?: boolean | undefined;
        showChip?: boolean | undefined;
        popperOpen?: boolean | undefined;
        contained?: boolean | undefined;
        bordered?: boolean | undefined;
        link?: boolean | undefined;
        naked?: boolean | undefined;
        size?: "tiny" | "small" | "medium" | "default" | "large" | "big" | "full" | "auto" | undefined;
        density?: "medium" | "default" | "none" | "tight" | "kind" | undefined;
        nowrap?: boolean | undefined;
        height?: string | undefined;
        selected?: boolean | undefined;
        focus?: boolean | undefined;
        actionStyle?: string | undefined;
        htmlRootStyle?: string | undefined;
        primary?: string | undefined;
        secondary?: string | undefined;
        reverse?: boolean | undefined;
        ratio?: string | undefined;
    };
    events: {
        click: MouseEvent;
    } & {
        [evt: string]: CustomEvent<any>;
    };
    slots: {
        buttonStart: {};
        default: {};
        buttonEnd: {};
        buttonLoadingIcon: {};
        buttonPopper: {};
    };
};
Link to api :
Api for component "Button"