feat(shortcode): add buttons

[ldez]

This is a draft to discuss the idea.

I created a button shortcode/partial (based on the hextra/button shortcode). One of the goals is to "remove" hextra/button shortcode.

I also created a test page with buttons for the demo.

I have several questions:

• The colors: I reused the colors from the badges, but I'm not sure about that; maybe more contrasted colors are better.
• The content: I used the .Inner content because it allows complete customization, but it's more complex than simple shortcode parameters.

About the content, there are some complexities in aligning icons and text. I added a CSS class to align the text and icons, but it requires the text to be wrapped in a <span> tag.

WDYT?

Demo: https://deploy-preview-830--hugo-hextra.netlify.app/docs/guide/shortcodes/button/

[netlify[bot]]

✅ Deploy Preview for hugo-hextra ready!

Name	Link
🔨 Latest commit	64cd0230ad91f8ab5327d038b628a8c8ea1a5125
🔍 Latest deploy log	https://app.netlify.com/projects/hugo-hextra/deploys/68c8a82a904486000841caeb
😎 Deploy Preview	https://deploy-preview-830--hugo-hextra.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[imfing]

Yeah, I definitely think this would be a great feature to add, I’ve been considering it for a while.

For inspiration:

• https://flowbite.com/docs/components/buttons/
• https://ui.shadcn.com/docs/components/button

Ideally, the button should be fairly generic, and the shortcode could expose options for things like variants, icons, etc.

[ldez]

Ideally, the button should be fairly generic, and the shortcode could expose options for things like variants, icons, etc.

I already handled:

• size
• colors
• border and border size

With your sentence, I could understand that you prefer:

{{< button text="This is a button" icon-left="github" icon-right="arrow-circle-right" >}}

instead of

{{< button>}}
{{< icon name="github">}} This is a button {{< icon name="arrow-circle-right" >}}
{{< /button >}}

If my understanding is correct, I will follow this way (it's easier to fix some problems with this approach)

[ldez]

I used the same colors and button style (default, pills) as Flowbite.

[ldez]

I need explicit confirmation about the design of the component.

https://github.com/imfing/hextra/pull/830#issuecomment-3282479658

[imfing]

I'm thinking something like:

{{< button size="small" color="primary" icon="github" iconPosition="start" >}}
We can put text here
{{< /button >}}

The iconPosition param ("start" | "end") would make it easier to control layout. Without it, the inner icon placement can get tricky, for example:

{{< button >}} This is {{< icon foo >}} Button {{< /button >}}

That would render like this:

---

If no inner text is provided, the button can fall back to an icon-only style whenever the icon param is set:

{{< button size="large" color="primary" icon="github" >}}{{< /button >}}

what do you think?

[ldez]

Seems right, I will do that :+1:

[imfing]

The colors: I reused the colors from the badges, but I'm not sure about that; maybe more contrasted colors are better.

It’s fine for now. In the future if it makes sense, we can move these color into a theme-wide palette CSS variables https://tailwindcss.com/docs/theme#using-a-custom-theme so reusing them will be much easier.

[ldez]

But I changed the colors https://github.com/imfing/hextra/pull/830#issuecomment-3282586570

Check the demo page https://deploy-preview-830--hugo-hextra.netlify.app/docs/guide/shortcodes/button/

[ldez]

I changed the design:

{{< button size="md" border="auto" mode="clear" shape="pills" color="indigo" icon="arrow-circle-right" iconPosition="end" >}}
This is a button
{{< /button >}}

options:

• size: sm, md, lg, xl
• color: primary, gray, purple, indigo, green, yellow, orange, amber, red
• border: none, auto, sm, md, lg, xl
• shape: default, pills
• mode: default, clear
• icon: name of the icon
• iconPosition: start, end

Check the demo page https://deploy-preview-830--hugo-hextra.netlify.app/docs/guide/shortcodes/button/

[imfing]

I changed the design:

{{< button size="md" border="auto" mode="clear" shape="pills" color="indigo" icon="arrow-circle-right" iconPosition="end" >}}
This is a button
{{< /button >}}

options:

• size: sm, md, lg, xl
• color: primary, gray, purple, indigo, green, yellow, orange, amber, red
• border: none, auto, sm, md, lg, xl
• shape: default, pills
• mode: default, clear
• icon: name of the icon
• iconPosition: start, end

Check the demo page https://deploy-preview-830--hugo-hextra.netlify.app/docs/guide/shortcodes/button/

This looks amazing at first glance.

Could you please clarify the default values for the size, border, and iconPosition options?

I'm slightly confused about the auto value for the border. What CSS does that map to?

[ldez]

Option	default	Values
size	md	sm, md, lg, xl
color	primary	primary, gray, purple, indigo, green, yellow, orange, amber, red
border	none	none, auto, sm, md, lg, xl
shape	default	default, pills
mode	default	default, clear
icon	-	name of the icon
iconPosition	start	start, end

By default, there is no border. auto adds a border depending on the size of the button.

[imfing]

I'll make some minor updates to the interface and styling to better align with the theme’s look and feel

[ldez]

Remember, this is a draft; I was still waiting for feedback.