Customize a Compose for Desktop AlertDialog
Tags: kotlin, jetpackcompose, ux
Published: 2021-01-11 12:24:05

This will be a rather short post and a very specific one, too. Before we go into details I would like thank Roman Sedaikin who commented on an issue [I created on GitHub](https://github.com/JetBrains/compose-jb/issues/244#issuecomment-757859680). He brought my attention to `DesktopDialogProperties`.

Let's take a look at the `AlertDialog` composable when used in Compose for Desktop. A rather basic form of an `AlertDialog` is created like this:

```kotlin
AlertDialog(onDismissRequest = {},
    title = { Text("Hello title") },
    confirmButton = {
      Button(onClick = {
      }) {
        Text("Confirm")
      }
    },
    dismissButton = {
      Button(onClick = {
      }) {
        Text("Dismiss")
      }
    },
    text = { Text("Hello text") })
```

![A simple AlertDialog](https://dev-to-uploads.s3.amazonaws.com/i/qu389z38jjxxhiaa3zoh.png)

So we have

- an optional title
- an optional text (message)
- a confirm button
- an optional dismiss button

There is also a window decoration incluing title and icon, which cannot be changed through the arguments you pass to the composable. At least, not directly. 

Let's take a closer look at the signature:

![AlertDialog arguments](https://dev-to-uploads.s3.amazonaws.com/i/nmbe0far2b8u3a95n8wq.png)

There is a `DialogProperties?` which is set to `null` by default.

![The DialogProperties interface](https://dev-to-uploads.s3.amazonaws.com/i/4330qogpfl7qbfk00377.png)

So `DialogProperties` is a marker interface. To see how we can customize our `AlertDialog` we need to find implementations. Fortunately IntelliJ can do this for us.

![Usages of DialogProperties](https://dev-to-uploads.s3.amazonaws.com/i/sz9rzakonu6bjw4zoel9.png)

Now let's see what `DesktopDialogProperties` has to offer.

![DesktopDialogProperties](https://dev-to-uploads.s3.amazonaws.com/i/3irl940gmohm5wsmvn71.png)

As we give the `AlertDialog` a title, we might not want window decorations at all.

```kotlin
properties = DesktopDialogProperties(undecorated = true),
```

![Undecorated AlertDialog](https://dev-to-uploads.s3.amazonaws.com/i/5o8x1j10005rs0lb1t88.png)

There is not only no decoration but also no border. To fix this, just add a modifier to the `AlertDialog`. Before I show this to you, pleae keep in mind that in this case you also need to add a `dismissButton`, because the window close button belongs to the window decoration we just successfully removed.

```kotlin
modifier = Modifier.border(width = 1.dp,
                           MaterialTheme.colors.primary),
```

![Adding a border](https://dev-to-uploads.s3.amazonaws.com/i/g7xbe86l751ewdmdspe1.png)

While I think this looks gorgeous you still cannot move the window. I will show you how to do this in a future post. For now you might consider this alternative:

```kotlin
AlertDialog(onDismissRequest = {},
    confirmButton = {
      Button(onClick = {
      }) {
        Text("Confirm")
      }
    },
    dismissButton = {
      Button(onClick = {
      }) {
        Text("Dismiss")
      }
    },
    properties = DesktopDialogProperties(title = "Hello title"),
    text = { Text("Hello text") })
```

![Setting the window title](https://dev-to-uploads.s3.amazonaws.com/i/8k9jyc0wht4n4wbtezg7.png)

I omitted the `title` argument for `AlertDialog` and put it in `DesktopDialogProperties` instead.

As you can see, you can customize your Compose for Desktop alert dialogs quite a bit. And there is more. For example you can change the resizability. How do you style yours? Please share your thoughts in the comments.