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)