Heading

You get two — we're building applications here, not authoring medical journals.

<script>
	import { Heading } from '$lib/components/heading';
	import { Button } from '$lib/components/button';
</script>

<div
	class="flex w-full flex-wrap items-end justify-between gap-4 border-b border-zinc-950/10 pb-6 dark:border-white/10"
>
	<Heading>Order #1011</Heading>
	<div class="flex gap-4">
		<Button outline>Refund</Button>
		<Button>Resend invoice</Button>
	</div>
</div>

Component API

Prop	Default	Description
Input extends the Headless UI <Input> component
disabled	false	Whether or not to disable the input.
invalid	false	Whether or not the input has a validation error.
name	-	The name to use when submitting an HTML form.
defaultValue	-	The initial value for the input.
value	-	The controlled value of the input.
onChange	-	Handler to call when the input value changes.
Field extends the Headless UI <Field> component
disabled	false	Whether or not to disable the entire field.
Label extends the Headless UI <Label> component
This component does not expose any component-specific props.
Description extends the Headless UI <Description> component
This component does not expose any component-specific props.
ErrorMessage extends the Headless UI <Description> component
This component does not expose any component-specific props.

Examples

Basic heading example

Use the Heading component to add a primary heading to a page:

<script>
	import { Heading } from '$lib/components/heading';
</script>

<Heading>Recent orders</Heading>

The Heading component renders an h1 by default, which you can customize with the level prop.

Basic subheading example

Use the Subheading component to add a subheading to a page:

<script>
	import { Subheading } from '$lib/components/heading';
</script>

<Subheading>Recent orders</Subheading>

The Subheading component renders an h2 by default, which you can customize with the level prop.

With custom level

Use the level prop to render a different heading element for semantic purposes while still maintaining the same visual styles:

<script>
	import { Heading } from '$lib/components/heading';
</script>

<Heading level={2}>Recent orders</Heading>