export const meta = {
title: 'Shorthand Props',
previous: { name: 'Introduction', url: '/' },
next: { url: '/composition', name: 'Composition' },
}
Fluent UI components can have "slots" which accept shothand props. For example, `Loader` component has an `label` slot which value defines the message that will appear together with the loading indicator.
```jsx
```
There are several forms of shorthand values that can be provided, but all of them share one common thing - each is eventually evaluated to React Element. Thus, you can think of shorthand values as a recipe to customize rendered React Element.
## Object as value
Each component's slot has associated default element type. For example, by default there is
`` element rendered for `Loader`'s `label` slot. It is possible to customize props of this default element by providing props object as shorthand value:
```jsx
// 💡 'content' and 'size' will be used as element's props
```
## Primitive as value
There is even shorter way to define default element's props - by using a primitive value. In that case provided shorthand value will be taken as a value for "default prop" of this element.
This could be much easier seen with an example. Here, again, we have a `Loader`
element with its label being defined with shorthand - where provided `string` value
will be used as label's `content`:
```jsx
<>
{/* 💡 has identical effect to the previous one */}
```
This works because `content` is the default prop of shorthand's `` element. You can also pass React Elements to slots:
```jsx
<>
Awesome Popup!} />
{/* 💡 has identical effect to the previous one */}
Awesome Popup! }} />
```
### Disable slot's rendering
It is also possible to pass falsy values (`false`, `null` or
`undefined`) to shorthand prop - in that case there will be nothing rendered for the component's slot.
```jsx
```
## Using Render Props
Our components implement [`render props`](https://reactjs.org/docs/render-props.html) technique to allow customize rendered output or wrap component slots. All Fluent UI components support it via `children` prop on shorthand objects, for example:
```jsx
} />,
}}
/>
```
You can also use this technique to completely replace slot contents:
```jsx
Loading data...,
}}
/>
```
### Use with shorthand collections
The same approach can be used with components that accept shorthand collections, for example `Menu`:
```jsx