Great!
Your settings have been successfully saved
"""
```
Our fancy custom message gets rendered in our modal.
### Named slots
We’ve modified the body of the modal with `@inner_block`, but we might want custom markup in the header and footer too. But wait—if `@inner_block` is the _default_ slot, that implies there can be others. It’s true! They need different names, so you can refer to them (a named slot can also take an argument, as we’ll see below).
Named slots are defined with the following syntax, when we call our function component:
```elixir
<:name_of_my_slot>
My slot content
```
Let’s prep the template to customize the header and the buttons in the footer using slot assigns named `@header`, `@confirm`, and `@cancel`:
```elixir
def modal(assigns) do
~H"""
Great!
Your settings have been successfully saved
<:confirm>
Return to profile
<:cancel>
Back to index
"""
```
Note that everything in the body of our function component that is not inside a _named slot_ is inside the default slot `@inner_block`.
### Optional slots
Some modals might not need all the slots we’ve told `modal` to render. Our function component will choke on any undefined assigns, so we start our definition by making sure `@header`, `@confirm`, or `@cancel` exist:
```elixir
def modal(assigns) do
assigns =
assigns
|> assign_new(:header, fn -> [] end)
|> assign_new(:confirm, fn -> [] end)
|> assign_new(:cancel, fn -> [] end)
~H"""
...
```
Here, the `assign_new/2` function initializes any of those that’s missing a value with an empty list.
Call `modal` without any of the named slots:
```elixir
~H"""
<.modal title="My basic modal">
Great!
Your settings have been successfully saved
"""
```
No problem! The unused slots are empty, but not error-raisingly undefined.
### Slot attributes
We can give named slots _attributes_ in much the same way that we pass assigns to regular function components, and these attributes can be accessed from inside the function component.
We’re going to use slot attributes to pass custom CSS classes to each of the footer buttons. Here we give the `@confirm` and `@cancel` slots each an attribute called `classes`:
```elixir
<:confirm classes="bg-green-400 rounded-full text-slate-50 text-sm p-2">
Return to profile
<:cancel classes="bg-emerald-400 rounded-full text-slate-50 text-sm p-2">
Back to index
```
Now, to get at the attributes of our named slots, we have to take into account that it’s possible to define [multiple entries for the same named slot](https://hexdocs.pm/phoenix_live_view/Phoenix.Component.html#module-named-slots-with-attributes). When we call `render_slot/2`, it simply renders all the entries for the slot name. But inside the slot’s assign, there’s a list of attribute maps: one for each entry. Even if there’s only one entry, and so one attributes map, we use a [`for` loop](https://elixir-lang.org/getting-started/comprehensions.html) to get into the list and access it.
To demonstrate: For every slot entry named `@confirm`, we’ll make a button whose class is the string-interpolated value of the `classes` attribute of that entry. We’ll do the same again for `@cancel`.
```elixir
```
Since there’s only one slot entry for each name, we’ll only get one button from each!
Our slot-specific classes have been applied, giving the buttons different colors!
### Passing assign values to the caller’s slot
Sometimes we’ll want to use data from an assign passed to the function component, within content that’s provided by a slot. The component has to pass that value into the slot to be rendered. We can do this by giving it as an argument to `render_slot/2`.
Suppose our function component takes a `@user` assign with data about the current user in a struct. We want to display `@user.name` from that struct in the body of the modal.
In the function definition, we’ll pass `render_slot/2` the `@user.name` as an argument.
```elixir
<%= render_slot(@body, @user.name) %>
```
In the following slot definition, the `let` argument binds the incoming `@user.name` data to the name `username`, so we can ask for it to be interpolated using `<%= username %>`. We have to use a named slot for the body this time, so we can use `let`.
```elixir
<:body let={username}>
Hey, <%= username %>!
Your settings have been successfully saved
```
Our modal is now super-duper customized, with the current user’s name provided to a slot from an assign!
It’s your turn to build something with the power of LiveView function components!