ButtonLink

The ButtonLink component as part of the navigation.The icons in button are placed using a IconButton component.

ButtonLinkBosons

Color
Color from the Tailwind palette.
type: string
default: primary
values: primary, secondary, warning, info, success, danger
Size
Button size.
type: string
default: md
values: xs, sm, md, lg, xl, full
Type
Button type.
type: string
default: button
values: button, submit
Tag
Type of html tag.
type: string
default: button
values: button, a
Disabled
Allows you to deactivate the button.
type: bool
default: false
Full
Sets the button width to 100% of the available area.
type: bool
default: false
Reverse
Changes the order of the icon and text.
type: bool
default: false
Title
Button text.
type: string
Attrs
Sets attributes in the html tag.
type: gopress.Attrs

Examples

Default button with sizes
xs
sm
md
lg
xl
1// Default ButtonLink with medium size
2
3@atoms.ButtonLink(
4  &atoms.ButtonLinkBosons{
5    Size:  "md",
6    Title: "Button",
7  },
8)
Color variant of button
primary
secondary
warning
danger
success
info
1// Colors of ButtonLink (widh default md size)
2
3@atoms.ButtonLink(
4  &atoms.ButtonLinkBosons{
5    Color: "primary",
6    Title: "Primary",
7  },
8)
Disabled variant of button
default
1// Disabled variant
2
3@atoms.ButtonLink
4  &atoms.ButtonLinkBosons{
5    Color:    "primary",
6    Title:    "Primary",
7    Disabled: true,
8  },
9)
Buttons with an icon
default
1// Button with icon
2
3@atoms.ButtonLinkIcon(
4  &atoms.ButtonLinkBosons{
5    Title:   "Primary",
6  },
7) {
8  @icons.IconCheck()
9}
Buttons with an icon on the right (reverse)
default
1// Button with icon
2
3@atoms.ButtonLinkIcon(
4  &atoms.ButtonLinkBosons{
5    Title:   "Primary",
6  },
7) {
8  @icons.IconCheck()
9}
Buttons full width
1// Full variant
2
3@atoms.ButtonLink(
4  &atoms.ButtonLinkBosons{
5    Title:    "Button text",
6    Full: true,
7  },
8)

Let's dive deeper and connect!

Gopress is brought to you by Pay For Done. We specialize in crafting products and services rooted in design systems. Join our community to discuss how we can support you.


© 2024 Pay For Done. All Rights Reserved. Website compliant with W3C validation.