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:
stringdefault:
primaryvalues:
primary, secondary, warning, info, success, dangerSize
Button size.
type:
stringdefault:
mdvalues:
xs, sm, md, lg, xl, fullType
Button type.
type:
stringdefault:
buttonvalues:
button, submitTag
Type of html tag.
type:
stringdefault:
buttonvalues:
button, aDisabled
Allows you to deactivate the button.
type:
booldefault:
falseFull
Sets the button width to 100% of the available area.
type:
booldefault:
falseReverse
Changes the order of the icon and text.
type:
booldefault:
falseTitle
Button text.
type:
stringAttrs
Sets attributes in the html tag.
type:
hanariu.AttrsExamples
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)