# Oneshot Button Confirmation Box Style

**URL:** <https://forum.inductiveautomation.com/t/oneshot-button-confirmation-box-style/104255>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [March 26, 2025, 3:30pm UTC](https://forum.inductiveautomation.com/t/oneshot-button-confirmation-box-style/104255 "2025-03-26T15:30:11Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![BigByte](https://avatars.discourse-cdn.com/v4/letter/b/f17d59/32.png) [@BigByte](https://forum.inductiveautomation.com/u/BigByte)\
**Post date:** [March 26, 2025, 3:30pm UTC](https://forum.inductiveautomation.com/t/oneshot-button-confirmation-box-style/104255/1 "2025-03-26T15:30:11Z")

</div>

Is there any way to change the style of the confirmation box popup? Specifically, I want to have line breaks in the text, and the only way I've found to do that in perspective is with the "white space" property in the style options. But it doesn't seem like the confirmation box has a style for me to modify. Is there a different way to insert line breaks or newline characters into perspective text?

I also see different posts about using HTML and `<br>`, but that doesn't seem to work with the confirmation box, unless I'm doing it wrong.

---

<div class="post-metadata">

**Author:** ![kvane](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kvane/32/22228_2.png) [@kvane](https://forum.inductiveautomation.com/u/kvane)\
**Post date:** [March 31, 2025, 5:43pm UTC](https://forum.inductiveautomation.com/t/oneshot-button-confirmation-box-style/104255/2 "2025-03-31T17:43:30Z")

</div>

In Perspective the "Markdown" component is the label-like component that best supports HTML/line break

> **[Perspective - Markdown | Ignition User Manual](https://www.docs.inductiveautomation.com/docs/8.1/appendix/components/perspective-components/perspective-display-palette/perspective-markdown)**
>
> The Markdown component allows users to format any type of text so it is publishable as plain text.

Which confirmation box popup are you referring to?

Edit: The built-in confirmation on the Button is probably what you are referring to, if the HTML flag isn't working there it probably only accepts a simple string.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [March 31, 2025, 7:07pm UTC](https://forum.inductiveautomation.com/t/oneshot-button-confirmation-box-style/104255/3 "2025-03-31T19:07:54Z")

</div>

> [@kvane](#):
>
> The built-in confirmation on the Button ...

Where's that, Kyle? I don't see it in 8.1.41 or in the docs.

---

<div class="post-metadata">

**Author:** ![BigByte](https://avatars.discourse-cdn.com/v4/letter/b/f17d59/32.png) [@BigByte](https://forum.inductiveautomation.com/u/BigByte)\
**Post date:** [March 31, 2025, 7:51pm UTC](https://forum.inductiveautomation.com/t/oneshot-button-confirmation-box-style/104255/4 "2025-03-31T19:51:19Z")

</div>

> [@Transistor](#):
>
> Where's that

On the One Shot Button component, there's a property called `confirm`. If you enable it, a small dialog box will pop up when you click the button, and you have to press ok on that popup to set the button's value.

If the text is small enough, it's just a small box that pops up at the button. But it seems like if you have enough text, it will stretch across the entire screen and gray out the background, almost like a full screen popup rather than a tooltip-like popup. The thing I'm working with is I have 1 line of text that spans the entire window, and then a single word on the second line. I'd like to format this with newline characters so it looks more like a block.

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [March 31, 2025, 8:10pm UTC](https://forum.inductiveautomation.com/t/oneshot-button-confirmation-box-style/104255/5 "2025-03-31T20:10:06Z")

</div>

Hmmph! I never used that component before. Thanks.

Try adding this to Perspective | Styles | sytlesheet.css:

```css
.ia_oneShotButtonComponent __confirmModal__ message {
	whiteSpace: pre;
}

```

Depending on how you're generating the text you may need to insert `\n` for each newline.

---

<div class="post-metadata">

**Author:** ![kvane](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kvane/32/22228_2.png) [@kvane](https://forum.inductiveautomation.com/u/kvane)\
**Post date:** [March 31, 2025, 8:59pm UTC](https://forum.inductiveautomation.com/t/oneshot-button-confirmation-box-style/104255/6 "2025-03-31T20:59:21Z")

</div>

Maybe all of my CSS answers going forward need to have a massive Advanced Stylesheet asterisk... 😄

User Manual - Enabling the Advanced Stylesheet:

> **[Style Classes | Ignition User Manual](https://www.docs.inductiveautomation.com/docs/8.1/ignition-modules/perspective/styles/style-classes#enabling-the-advanced-stylesheet)**
>
> A Style Class is a group of Style settings that are saved together. Style Classes can be applied to multiple components to provide consistency in design. A Style Class enables you to define style elements in one place, and then quickly apply that...
