astro/examples/component/packages/my-component

Example @example/my-component

This is an example package, exported as @example/my-component. It consists of two Astro components, Button and Heading.

Button

The Button component generates a <button> with a default type of button.

---
import * as Component from '@example/my-component'
---
<Component.Button>Plain Button</Component.Button>

<!-- generated html -->
<button type="button">Plain Button</button>

Heading

The Heading component generates an <h> tag with a default role of heading and a level attribute that gets written to aria-level.

---
import * as Component from '@example/my-component'
---
<Component.Heading>Heading</Component.Heading>
<Component.Heading level="2">Subheading</Component.Heading>

<!-- generated html -->
<h role="heading" aria-level="1">Plain Button</h>
<h role="heading" aria-level="2">Subheading</h>