Button
Button component - used in forms or as part of navigation. Icons in buttons are placed using a component IconButton.
ButtonBosons
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, aRounded
Determines the rounding of the button.
type:
booldefault:
falseOutline
Alternative setting - color arrangement with a clear border.
type:
booldefault:
falseLight
Setting an alternative color arrangement.
type:
booldefault:
falseDisabled
Allows you to deactivate the button.
type:
booldefault:
falseIcononly
It only leaves the default area for the icon.
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:
gopress.AttrsExamples
Default button with sizes
xs
sm
md
lg
xl
1// Default Button with medium size
2
3@atoms.Button(
4 &atoms.ButtonBosons{
5 Size: "md",
6 Title: "Button",
7 },
8)Light variant of button
xs
sm
md
lg
xl
1// Light variant
2
3@atoms.Button(
4 &atoms.ButtonBosons{
5 Size: "md",
6 Title: "Button",
7 Light: true,
8 },
9)Light variant of button
xs
sm
md
lg
xl
1// Outline variant
2
3@atoms.Button(
4 &atoms.ButtonBosons{
5 Size: "md",
6 Title: "Button",
7 Outline: true,
8 },
9)Color variant of button
primary
secondary
warning
danger
success
info
1// Colors of Button (widh default md size)
2
3@atoms.Button(
4 &atoms.ButtonBosons{
5 Color: "primary",
6 Title: "Primary",
7 },
8)Color light variant of button
primary
secondary
warning
danger
success
info
1// Light color variant (widh default md size)
2
3@atoms.Button(
4 &atoms.ButtonBosons{
5 Color: "primary",
6 Title: "Primary",
7 Light: true,
8 },
9)Color outline variant of button
primary
secondary
warning
danger
success
info
1// Outline color variant (widh default md size)
2
3@atoms.Button(
4 &atoms.ButtonBosons{
5 Color: "primary",
6 Title: "Primary",
7 Outline: true,
8 },
9)Disabled variant of button
default
light
outine
1// Disabled variant
2
3@atoms.Button(
4 &atoms.ButtonBosons{
5 Color: "primary",
6 Title: "Primary",
7 Disabled: true,
8 },
9)Rounded variant of button
default
light
outine
1// Rounded variant
2
3@atoms.Button(
4 &atoms.ButtonBosons{
5 Color: "primary",
6 Title: "Primary",
7 Rounded: true,
8 },
9)Buttons with an icon
default
light
outine
1// Button with icon
2
3@atoms.ButtonIcon(
4 &atoms.ButtonBosons{
5 Title: "Primary",
6 },
7) {
8 @icons.IconCheck()
9}Buttons with an icon on the right (reverse)
default
light
outine
1// Button with reverse icon
2
3@atoms.ButtonIcon(
4 &atoms.ButtonBosons{
5 Reverse: true,
6 Title: "Primary",
7 },
8) {
9 @icons.IconCheck()
10}Buttons icon only
default
light
outine
default
light
outine
1// Button with icon only
2
3@atoms.ButtonIcon(
4 &atoms.ButtonBosons{
5 Icononly: true
6 },
7) {
8 @icons.IconCheck()
9}Buttons full width
1// Full variant
2
3@atoms.Button(
4 &atoms.ButtonBosons{
5 Title: "Button text",
6 Full: true,
7 },
8)