# Astro Props

> Learn how to use props in Astro components to pass data like a name, reading them from Astro.props with object destructuring and default values.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2021-11-16 | Topics: [Astro](https://flaviocopes.com/tags/astro/) | Canonical: https://flaviocopes.com/astro-props/

You might be familiar with the concept of props from a modern [JavaScript](https://flaviocopes.com/javascript/) framework like [React](https://flaviocopes.com/react/), or [Vue](https://flaviocopes.com/vue-introduction/) or Svelte.

> NOTE: I wrote about all of those in the past, and you can find my articles on [React Props](https://flaviocopes.com/react-props/), [Vue Props](https://flaviocopes.com/vue-props/) and [Svelte Props](https://flaviocopes.com/svelte-props/).

Props are the way we can pass information to components. This includes variables, but also functions.

[Astro components](https://flaviocopes.com/astro-components/) also support props. 

Here's how to use them.

Suppose you define a Hello component in `src/components/Hello.astro`:

```js
<p>Hello!</p>
```

You can pass a name prop to the component when you use it, like this: `<Hello name="Flavio" />`, and you can display the name in your component output by using this syntax:

```js
<p>Hello {Astro.props.name}!</p>
```

It's common to extract the props to individual variables with object destructuring in the component's frontmatter section, which is nice when you have complex components:

```js
---
const { name } = Astro.props
---
<p>Hello {name}!</p>
```

Here's how to work with multiple props, to support for example this usage: ``<Hello name="Flavio" message="Welcome" />``

```js
---
const { name, message } = Astro.props
---
<p>{message} {name}!</p>
```

And in this way you can support defaults for props that might be unset:

```js
---
const { name = '', message = 'Hello' } = Astro.props
---
<p>{message} {name}!</p>
```