Components

Features shared across components.

Slots versus props

You can use either slots or props. Props are recommended as they are type safe and work better in combination with content collections.

Though, the following examples do the same thing.

---
import Button from 'fulldev-ui/components/Button.astro'
---

<Button href="#">Click me</Button>
<Button href="#" text="Click me" />

Conditional rendering

By default, if no content is passed to a component, it will NOT render anything. This helps optimize your code, especially when working with content collections.

You can override this default behavior using the if prop, which lets you control component rendering based on a truthy or falsy value.

---
import Button from 'fulldev-ui/components/Button.astro'
---

<Button text="With content" />
<Button if={true} />
<Button if={false} />
<Button />