the default button selector in Ueyen is .un-bu. The default button can turn into other types of a button
by having an
additional class that is described below. The _narrow and _outline classes can be combined
with the default button
selector and can be both assigned together, to get a new type of button.
Ueyen buttons come in 6 different types.
To get different button types, we can add on of the following additional classes
.un-bu
un-bu _primaryPrimary button
un-bu _quietQuiet button
un-bu _attnAttn button
un-bu _alertAlert button
un-bu _successSuccess button
un-bu _linkLink button
There are three different button variations, with the class selectors of _outline, _round
and _narrow in Ueyen that can be also combined to gether.
To get the outline buttons, we can add the additional class of _outline to any type of button.
un-bu _primary _outlineOutlined Primary button
un-bu _quiet _outlineOutlined Quiet button
un-bu _attn _outlineOutlined Attn button
un-bu _alert _outlineOutlined Alert button
un-bu _success _outlineOutlined Success button
un-bu _link _outlineOutlined Link button
To get the rounded buttons, we can add the additional class of _outline to any type of button.
un-bu _primary _roundRounded Primary button
un-bu _quiet _roundRounded Quiet button
un-bu _attn _roundRounded Attn button
un-bu _alert _roundRounded Alert button
un-bu _success _roundRounded Success button
un-bu _link _roundRounded Link button
To get the narrowed buttons, we can add the additional class of _outline to any type of button.
un-bu _primary _narrowNarrowed Primary button
un-bu _quiet _narrowNarrowed Quiet button
un-bu _attn _narrowNarrowed Attn button
un-bu _alert _narrowNarrowed Alert button
un-bu _success _narrowNarrowed Success button
un-bu _link _narrowNarrowed Link button
The buttons below have multiple variations at the same time.
The button container can be advantageous in cases where we have more than one button. The container is set to automatically give us the best possible positioning and gap.
un-bu-containerLeft-aligned Button container
un-bu-container-cCenter-aligned Button container
un-bu-container-rRight-aligned Button container
The button container is nesting two buttons.
The button container classes can be followed by :s which is breakpoint-small, to :h which
is breakpoint-huge to be effective on different breakpoints.
un-bu-container:sLeft-aligned on larger than Breakpoint small
un-bu-container-c:sCenter-aligned on larger than Breakpoint small
un-bu-container-r:sRight-aligned on larger than Breakpoint small
un-bu-container:mLeft-aligned on larger than Breakpoint medium
un-bu-container-c:mCenter-aligned on larger than Breakpoint medium
un-bu-container-r:mRight-aligned on larger than Breakpoint medium
un-bu-container:lLeft-aligned on larger than Breakpoint large
un-bu-container-c:lCenter-aligned on larger than Breakpoint large
un-bu-container-r:lRight-aligned on larger than Breakpoint large
un-bu-container:hLeft-aligned on larger than Breakpoint huge
un-bu-container-c:hCenter-aligned on larger than Breakpoint huge
un-bu-container-r:hRight-aligned on larger than Breakpoint huge
The button container in this example is center-aligned but default, and it will be left-aligned after the screensize gets larger than the breakpoint medium.