Hi, since Salient's version 18, the legacy Jumbo button is replaced by Button (formerly Call-to-action) and I wonder how to achieve what I need my buttons to look like with the Button element. I want the text on the button to wrap. Legacy button was doing it. In the new Button, I use the Basic button to replicate de Formely Jumbo button, but the text stays on one line.
Is there something I'm doing wrong? I prefer not to use css, but if I have to, I will. Or can I still use Legacy Jumbo button? Are they gonna stay forever? Is it better to not use legacy elements?
In my screen capture you can see the first row made with Jumbo buttons, and the second row with Buttons (formerly Call-to-action) where the text is not wrapping.
Looking at your screenshot, I see exactly what you mean: the new "Button" elements are staying on a single line and overflowing, while your legacy "Jumbo" buttons wrap the text perfectly.
To answer your big question: Is it better to stop using Legacy elements?
Yes. While Salient typically keeps "Legacy" elements for years to avoid breaking old sites, they do not receive performance updates or new design features. Transitioning to the new "Button" element is the "best practice" for site speed and future-proofing your design.
How to fix the Text Wrapping
The reason the new buttons aren't wrapping is that they use a white-space: nowrap rule by default to maintain a "pill" shape. You aren't doing anything wrong; the element just lacks a "Wrap Text" toggle in the settings.
Since you mentioned you're willing to use CSS if necessary, we can use an elegant exclusion style to target only the buttons that need wrapping without affecting the others.
Step 1: Add a Class to your Button
Edit your new Button element.
Scroll to "Extra Class Name" and type: wrap-my-text
Save the element.
Step 2: Add this to Salient > General Settings > CSS/Script Related > Custom CSS Code:
.nectar-button.wrap-my-text {
white-space: normal !important; /* Overrides the 'no-wrap' default */
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
line-height: 1.4 !important; /* Adds healthy breathing room between lines */
height: auto !important; /* Allows the button height to grow with the text */
padding-top: 20px !important;
padding-bottom: 20px !important;
}
Let us know if this works.
If you need further assistance on this issue, please include the website page URL for further inspection and investigation.
Hi, since Salient's version 18, the legacy Jumbo button is replaced by Button (formerly Call-to-action) and I wonder how to achieve what I need my buttons to look like with the Button element. I want the text on the button to wrap. Legacy button was doing it. In the new Button, I use the Basic button to replicate de Formely Jumbo button, but the text stays on one line.
Is there something I'm doing wrong? I prefer not to use css, but if I have to, I will. Or can I still use Legacy Jumbo button? Are they gonna stay forever? Is it better to not use legacy elements?
In my screen capture you can see the first row made with Jumbo buttons, and the second row with Buttons (formerly Call-to-action) where the text is not wrapping.
Thanks!
Attached files: Capture d’écran, le 2026-02-04 à 11.24.40.png
Hello Josée!
Thanks for writing in!
Looking at your screenshot, I see exactly what you mean: the new "Button" elements are staying on a single line and overflowing, while your legacy "Jumbo" buttons wrap the text perfectly.
To answer your big question: Is it better to stop using Legacy elements?Yes. While Salient typically keeps "Legacy" elements for years to avoid breaking old sites, they do not receive performance updates or new design features. Transitioning to the new "Button" element is the "best practice" for site speed and future-proofing your design.
How to fix the Text WrappingThe reason the new buttons aren't wrapping is that they use a white-space: nowrap rule by default to maintain a "pill" shape. You aren't doing anything wrong; the element just lacks a "Wrap Text" toggle in the settings.
Since you mentioned you're willing to use CSS if necessary, we can use an elegant exclusion style to target only the buttons that need wrapping without affecting the others.
Step 1: Add a Class to your Button
Edit your new Button element.
Scroll to "Extra Class Name" and type: wrap-my-text
Save the element.
Step 2: Add this to Salient > General Settings > CSS/Script Related > Custom CSS Code:
.nectar-button.wrap-my-text { white-space: normal !important; /* Overrides the 'no-wrap' default */ display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; line-height: 1.4 !important; /* Adds healthy breathing room between lines */ height: auto !important; /* Allows the button height to grow with the text */ padding-top: 20px !important; padding-bottom: 20px !important; }Let us know if this works.
If you need further assistance on this issue, please include the website page URL for further inspection and investigation.
Regards,