ButtonDescriptive
Button/tile with an icon, title and description.
ButtonDescriptiveBosons
Tag
Type of html tag.
type:
stringdefault:
buttonRight
Changes position of elements inside button.
type:
booldefault:
falseReverse
Changes the order of the icon and text.
type:
booldefault:
falseSlot
Area for icon or avatar.
type:
booldefault:
falseHeading
Heading text.
type:
stringCaption
Caption text.
type:
stringAttrs
Sets attributes in the html tag.
type:
hanariu.AttrsExamples
Standard
1// Default standard button
2
3@atoms.ButtonDescriptive(&atoms.ButtonDescriptiveBosons{
4 Heading: "Main page",
5 Caption: "This is where it all starts",
6})Reversed vertically
1// Reverse button
2
3@atoms.ButtonDescriptive(&atoms.ButtonDescriptiveBosons{
4 Reverse: true,
5 Heading: "Main page",
6 Caption: "This is where it all starts",
7})Standard with icon
1// Button with icon
2
3@atoms.ButtonDescriptive(&atoms.ButtonDescriptiveBosons{
4 Slot: true,
5 Heading: "Main page",
6 Caption: "This is where it all starts",
7}) {
8 @protons.Icon(&protons.IconBosons{
9 Size: "full",
10 }) {
11 @icons.IconCheck()
12 }
13}Vertically reversed with avatar
1// Button with avatar
2
3@atoms.ButtonDescriptive(&atoms.ButtonDescriptiveBosons{
4 Slot: true,
5 Heading: "Main page",
6 Caption: "This is where it all starts",
7}) {
8 @atoms.Avatar(
9 &atoms.AvatarBosons{
10 Size: "full",
11 Path: "https://avatars.githubusercontent.com/u/213058?v=4",
12 Alt: "Radosław Muszyński",
13 },
14 )
15}Reversed vertically and horizontally with the icon
1// Reverse button with icon on right
2
3@atoms.ButtonDescriptive(&atoms.ButtonDescriptiveBosons{
4 Slot: true,
5 Reverse: true,
6 Right: true,
7 Heading: "Main page",
8 Caption: "This is where it all starts",
9}) {
10 @protons.Icon(&protons.IconBosons{
11 Size: "full",
12 }) {
13 @icons.IconCheck()
14 }
15}