Button
Button
Create Button
If the $href argument is empty, the button library functions (button:text, button:filled, button:transparent, etc.) create a button, while if the $href argument is provided they will create a link button.
:: button:filled("Button", "format_color_fill")
:: button:filled("Link", "format_color_fill", href: "/")
Styles
There are four button styles available to use in SunSed UI. Using different styles of buttons throughout your UI allows you to create a hierarchy of actions your end-users can take within your app.
Filled
Filled buttons use your primary color as the background color of the buttons.
:: button:filled("Button", "format_color_fill")
:: button:filled("Link", "format_color_fill", href: "/")
:: button:filled("Disabled", "format_color_fill", disabled: TRUE)
Outlined
Outlined buttons use your app's primary color for the borders and semi-transparent variation for the background when hovering over the button.
:: button:outlined("Button", "border_outer")
:: button:outlined("Link", "border_outer", href: "/")
:: button:outlined("Disabled", "border_outer", disabled: TRUE)
Transparent
The transparent button, as its name suggests, has no background color. When hovered over, the transparent button will have a light grey background color.
:: button:transparent("Button", "invert_colors_off")
:: button:transparent("Link", "invert_colors_off", href: "/")
:: button:transparent("Disabled", "invert_colors_off", disabled: TRUE)
Text
Text buttons have no background (even when hovered) and much less padding making them the ideal button style for compact use cases.
:: button:text("Button", "format_color_text")
:: button:text("Link", "format_color_text", href: "/")
:: button:text("Disabled", "format_color_text", disabled: TRUE)
Sizes
There are three sizes available for the buttons, small, medium, and large.
:: button:filled("Small", "photo_size_select_small", size: "small")
:: button:filled("Medium (Default)", "aspect_ratio", size: "medium")
:: button:filled("Large", "expand", size: "large")
::br 3
:: button:outlined("Small", "photo_size_select_small", size: "small")
:: button:outlined("Medium (Default)", "aspect_ratio", size: "medium")
:: button:outlined("Large", "expand", size: "large")
::br 3
:: button:transparent("Small", "photo_size_select_small", size: "small")
:: button:transparent("Medium (Default)", "aspect_ratio", size: "medium")
:: button:transparent("Large", "expand", size: "large")
::br 3
:: button:text("Small", "photo_size_select_small", size: "small")
:: button:text("Medium (Default)", "aspect_ratio", size: "medium")
:: button:text("Large", "expand", size: "large")
Radius
There are three available button radius; sharp, normal (default), and round. The radius argument does not affect button:text which has no background color at any of its state.
:: button:filled("Round", "circle", radius: "round")
:: button:filled("Normal (Default)", "rounded_corner")
:: button:filled("Sharp", "stop", radius: "sharp")
::br 3
:: button:outlined("Round", "circle", radius: "round")
:: button:outlined("Normal (Default)", "rounded_corner")
:: button:outlined("Sharp", "stop", radius: "sharp")
::br 3
:: button:transparent("Round", "circle", radius: "round")
:: button:transparent("Normal (Default)", "rounded_corner")
:: button:transparent("Sharp", "stop", radius: "sharp")
Stacked
By setting the $stacked argument to TRUE, you place the icon on top of the label rather than on its side. button:text does not have a background color and as a result needs a lot less padding, allowing the icon size to be much bigger when stacked, making it the ideal button choice for mobile and tablet's Bottombar.
You have the option of setting the stacked state of a button at different breakpoints using $stacked_on_mobile and $stacked_on_tablet that will overwrite the $stacked arguments value at their respective breakpoint.
:: button:text("Text", "menu", stacked: TRUE)
:: button:transparent("Transparent", "menu", stacked: TRUE)
:: button:outlined("Outlined", "menu", stacked: TRUE)
:: button:filled("Filled", "menu", stacked: TRUE)
Icon Only
To create an icon-only button, pass the $icon_name argument while leaving the $label argument empty.
:: button:text(icon_name: "delete")
:: button:transparent(icon_name: "add_shopping_cart")
:: button:outlined(icon_name: "play_circle", radius: 'round')
:: button:filled(icon_name: "thumb_up", radius: 'normal')
