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.

format_color_fill

Link

:: 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.

format_color_fill

Link

:: 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.

border_outer

Link

:: 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.

invert_colors_off

Link

:: 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.

format_color_text

Link

:: 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')
Copyright © SunSed LLC 2013-2021 All rights reserved.