Button

A button or a component that looks like a button.

<script lang="ts">
import { Button } from "coss-svelte";
</script>

<Button>Button</Button>

Installation

Install the component package, shared coss-svelte theme, and Bits UI peer.

npm install coss-svelte @coss-svelte/theme bits-ui

Usage

Import the Svelte component exports directly from the package.

import { Button } from "coss-svelte";

Anatomy

Button exposes a single component export for the current implementation.

API Reference

Button

A button or a component that looks like a button.

Signatures

{ href: string; type?: undefined; target?: HTMLAttributeAnchorTarget | null; download?: any; form?: undefined; disabled?: undefined }

{ href?: undefined; type?: "submit" | "reset" | "button" | null; target?: undefined; download?: undefined; form?: string | null; disabled?: boolean | null }

Prop	Type	Default	Description
`variant`	`"link" \| "primary" \| "secondary" \| "outline" \| "ghost" \| "destructive" \| "destructive-outline" \| "default"`	`"default"`	Visual variant for the component.
`size`	`"default" \| "md" \| "xs" \| "sm" \| "lg" \| "xl" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg" \| "icon-xl"`	`"default"`	Size variant for the component.
`href`	`string`	`""`	Renders the component as a link target when provided.
`type`	`"submit" \| "reset" \| "button" \| null`	`"button"`	Behavior, selection, or HTML type passed to the underlying control.
`loading`	`boolean`	`false`	Shows the loading indicator and disables the button.
`disabled`	`boolean \| null`	`false`	Disables interaction with the control.

children : Snippet<[]>

Inherits from Svelte <a> / <button> attributes.

Implementation Details

Status: Stable
Foundation: native
Category: Actions
Particles: 40