Button

A component that if passed a `href` prop will render an anchor element instead of a button element.

	<script lang="ts">
  import { Button } from "bits-ui";
</script>
 
<Button.Root
  class="inline-flex h-12 items-center justify-center rounded-input bg-dark
	px-[21px] text-[15px] font-semibold text-background shadow-mini
	hover:bg-dark/95 active:scale-98 active:transition-all"
>
  Unlimited
</Button.Root>

Structure

	<script lang="ts">
	import { Button } from "bits-ui";
</script>
 
<Button.Root />

API Reference

Button.Root

A component that can switch between a button and an anchor tag based on the href/type props.

Property Type Description
href
string

An optional prop that when passed converts the button into an anchor tag.

Default: undefined
ref $bindable
HTMLButtonElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
Data Attribute Value Description
data-button-root
''

Present on the button element.