Buttons
Methodology
Buttons are not the foundations of the design system but are an important part of UI there are many variations of a button component and we try to keep things simple. note: Google Material Icons align when fix applied from the icons page.
Making a button consists of one of the following a Link Block, Link or Button we first give a class of button, then from there we can stake classes to define the style. for the border color we simply say which color then border like so
Making a button consists of one of the following a Link Block, Link or Button we first give a class of button, then from there we can stake classes to define the style. for the border color we simply say which color then border like so
Type
Value
Size
Rounded
Color
class color
Border
Type (nested element)
Text display
Element
Interaction Name
Mouse In
Mouse Out
tiny
Default
Small
Small
Everything below is the present styles you do not need to adjust these with the exception of the individual states i.e hover. colors and inhert from the color system. * Tiny class is mainly used for tags
Primary
Class
Padding
Font Size
default
1em 1.5em
1em
1.2em 2.2em
1em
1.2em 2.2em
0.75em
0.4em 0.7em
0.675em
Greyscale
Notification
Ghost buttons
To make a button ghost/outlined simply apply the border radius i.e to change the border width go to color page and amend each border color.
Class
Stroke
Inherit
Ghost Large
Ghost Default
Ghost Small
Ghost Tiny
Rounded
Select the button below and adjust the rounded property
HTMX Button
Select the button below and adjust the rounded property
hx-get
hx-target
hx-select
hx-swap
directory/location of content
ID of where I want div to go
ID of div I want to pull in
innerHTML (replaces containing div)