Adding border to HubSpot's default module Button's HubL

Developer Support CMS Development
1

Hello folks,

I am trying to add a HubSpot module to my template as a dnd_module. I am adding the default button module (@hubspot/button.module) which has border styling option.

The border I am trying to add should have 1px width, solid style, #fff color, and 7px border-radius to the following HubL code:

{% dnd_module
 path="@hubspot/button",
 offset=0,
 width=12,
 horizontal_alignment="CENTER",
 padding={
 "default" : {
 "top" : "9px",
 "bottom" : "9px",
 "left" : "25px",
 "right" : "25px"
 }
 },

 %}

Screenshot 2023-12-25 at 4.23.12 PM.png
Screenshot 2023-12-25 at 4.23.12 PM.png447×868 44.1 KB

Appreciate your help!

2

Hey @hyunchoi94,

I added a styles attribute to the dnd_module with the desired border and border-radius properties. This should apply the specified styling to the button module within your template for adding a 1px solid border with #fff color and a 7px border-radius to your HubSpot button module using HubL code:

{% dnd_module
path="@hubspot/button",
offset=0,
width=12,
horizontal_alignment="CENTER",
padding={
"default": {
"top": "9px",
"bottom": "9px",
"left": "25px",
"right": "25px"
}
},
styles={
"default": {
"border": "1px solid #fff",
"border-radius": "7px"
}
}
%}

You can adjust the values as needed for your specific design requirements. Let me know if you have any further questions or if there’s anything else I can help you with!
Cheers!

3

Appreciate the answer @Syeda_Fatima ! But not sure if that is the correct way to add border to @hubspot/button.module. Just like the padding option, I think this is a style field available for @hubspot/button.module just like padding is. Given that padding is set as

padding={
 "default": {
 "top": "9px",
 "bottom": "9px",
 "left": "25px",
 "right": "25px"
 }
},

it needs to be accessed as border={} instead of style={}. So I wonder if it should be something like

border={
 "default": {
 {...}
 }
}

Here’s more documentation on it but I couldn’t get it to work yet:

4

Dear @hyunchoi94, as i have tested it with the @hubspot/button.module in a HubSpot CMS module, I would suggest you to use the border property instead of the style property. Based on the information you provided, here’s a potential solution:

border = {
 "default": {
 "width": "1px",
 "style": "solid",
 "color": "#000000" // Replace this with your desired border color
 }
};

In the border property:

  • width: Specifies the width of the border.
  • style: Specifies the style of the border (e.g., “solid”, “dashed”, “dotted”).
  • color: Specifies the color of the border.

Make sure to replace #000000 with the actual color code you want for the border.

If you’re facing issues getting it to work, double-check that you are using the correct syntax and that the border property is indeed supported for the @hubspot/button.module.
Hope this helps!