Skyline_button_v1SourceButtons are one the primary UI elements used for user actions. Each button is labeled and performs a primary action when clicked.
There are regular, compact and icon buttons, as well as buttons that are styled as links. The button components are avialable either as stateful variants which support rich interactions like loading states or as stateless components that only support basic options.
All buttons can also function as HTML links (<a/> tags) when passed Effect.open_url for their on_click action.
val regular :
?test_selector:Bonsai_web.Test_selector.t Bonsai_web.Bonsai.t ->
?confirm:bool Bonsai_web.Bonsai.t ->
?loading:[ `Yes | `No | `While_on_click_in_flight ] Bonsai_web.Bonsai.t ->
?dropdown:unit Skyline_context_menu_v1.t Bonsai_web.Bonsai.t ->
?autofocus:bool Bonsai_web.Bonsai.t ->
?disabled:bool Bonsai_web.Bonsai.t ->
?secondary:bool Bonsai_web.Bonsai.t ->
?intent:Skyline_theme_v1.Color.t Bonsai_web.Bonsai.t ->
?tooltip:string Bonsai_web.Bonsai.t ->
?icon:Codicons.t Bonsai_web.Bonsai.t ->
on_click:unit Bonsai_web.Effect.t Bonsai_web.Bonsai.t ->
string Bonsai_web.Bonsai.t ->
Bonsai_web.Bonsai.graph @ local ->
Bonsai_web.Vdom.Node.t Bonsai_web.Bonsai.tThe default button component that can be used in most situations. This button is labeled with an optional icon and support for intent colors and a secondary style.
It also supports loading states, a confirm dialog, and a dropdown to disclose a menu with secondary actions.
val regular' :
?test_selector:Bonsai_web.Test_selector.t ->
?autofocus:bool ->
?disabled:bool ->
?secondary:bool ->
?intent:Skyline_theme_v1.Color.t ->
?tooltip:string ->
?icon:Codicons.t ->
on_click:unit Bonsai_web.Effect.t ->
string ->
Bonsai_web.Vdom.Node.tA stateless version of the regular button component. This can be useful if having separate Bonsai state for the button is too heavy weight or if stateful features like a loading state or dropdown are not required.
val compact :
?test_selector:Bonsai_web.Test_selector.t Bonsai_web.Bonsai.t ->
?confirm:bool Bonsai_web.Bonsai.t ->
?loading:[ `Yes | `No | `While_on_click_in_flight ] Bonsai_web.Bonsai.t ->
?dropdown:unit Skyline_context_menu_v1.t Bonsai_web.Bonsai.t ->
?autofocus:bool Bonsai_web.Bonsai.t ->
?disabled:bool Bonsai_web.Bonsai.t ->
?secondary:bool Bonsai_web.Bonsai.t ->
?intent:Skyline_theme_v1.Color.t Bonsai_web.Bonsai.t ->
?tooltip:string Bonsai_web.Bonsai.t ->
?icon:Codicons.t Bonsai_web.Bonsai.t ->
on_click:unit Bonsai_web.Effect.t Bonsai_web.Bonsai.t ->
string Bonsai_web.Bonsai.t ->
Bonsai_web.Bonsai.graph @ local ->
Bonsai_web.Vdom.Node.t Bonsai_web.Bonsai.tA more compact button component that has the same visual height as icon buttons. This button is labeled with an additional icon and support for intent colors and secondary style.
It also supports loading states, a confirm dialog, and a dropdown to disclose a menu with secondary actions.
This button is a good choice in UIs which require more density or for secondary actions where a regular button feels to heavy weight.
val compact' :
?test_selector:Bonsai_web.Test_selector.t ->
?autofocus:bool ->
?disabled:bool ->
?secondary:bool ->
?intent:Skyline_theme_v1.Color.t ->
?tooltip:string ->
?icon:Codicons.t ->
on_click:unit Bonsai_web.Effect.t ->
string ->
Bonsai_web.Vdom.Node.tA stateless version of the compact button component. This can be useful if having separate Bonsai state for the button is too heavy weight or if stateful features like a loading state or dropdown are not required.
val icon :
?test_selector:Bonsai_web.Test_selector.t Bonsai_web.Bonsai.t ->
?loading:[ `Yes | `No | `While_on_click_in_flight ] Bonsai_web.Bonsai.t ->
?dropdown:unit Skyline_context_menu_v1.t Bonsai_web.Bonsai.t ->
?disabled:bool Bonsai_web.Bonsai.t ->
?intent:Skyline_theme_v1.Color.t Bonsai_web.Bonsai.t ->
?tooltip:string Bonsai_web.Bonsai.t ->
on_click:unit Bonsai_web.Effect.t Bonsai_web.Bonsai.t ->
Codicons.t Bonsai_web.Bonsai.t ->
Bonsai_web.Bonsai.graph @ local ->
Bonsai_web.Vdom.Node.t Bonsai_web.Bonsai.tA button component for secondary or contextual actions. This button shows an icon with optional tooltip and support for intent colors.
It also supports loading states, a confirm dialog, and a dropdown to disclose a menu with secondary actions.
This button is a good choice for secondary or contextual actions or when there is limited space.
val icon' :
?test_selector:Bonsai_web.Test_selector.t ->
?disabled:bool ->
?intent:Skyline_theme_v1.Color.t ->
?tooltip:string ->
on_click:unit Bonsai_web.Effect.t ->
Codicons.t ->
Bonsai_web.Vdom.Node.tA stateless version of the icon' button component. This can be useful if having separate Bonsai state for the button is too heavy weight or if stateful features like a loading state or dropdown are not required.
val link :
?test_selector:Bonsai_web.Test_selector.t ->
?disabled:bool ->
?intent:Skyline_theme_v1.Color.t ->
?font:Skyline_text_v1.Font_family.t ->
?size:Skyline_text_v1.Font_size.t ->
?style:Skyline_text_v1.Font_style.t ->
?icon:Codicons.t ->
on_click:unit Bonsai_web.Effect.t ->
string ->
Bonsai_web.Vdom.Node.tA button styled as a link. This should be used for simple actions like revealing more information or for actions that perform link like navigation.
When passed Effect.open_url as the on_click action the button is rendered as a HTML <a/> tag.
val with_error :
?test_selector:Bonsai_web.Test_selector.t Bonsai_web.Bonsai.t ->
?confirm:bool Bonsai_web.Bonsai.t ->
?loading:[ `Yes | `No | `While_on_click_in_flight ] Bonsai_web.Bonsai.t ->
?dropdown:unit Core.Or_error.t Skyline_context_menu_v1.t Bonsai_web.Bonsai.t ->
?on_dropdown_open:unit Bonsai_web.Effect.t Bonsai_web.Bonsai.t ->
?autofocus:bool Bonsai_web.Bonsai.t ->
?disabled:bool Bonsai_web.Bonsai.t ->
?secondary:bool Bonsai_web.Bonsai.t ->
?intent:Skyline_theme_v1.Color.t Bonsai_web.Bonsai.t ->
?tooltip:string Bonsai_web.Bonsai.t ->
?icon:Codicons.t Bonsai_web.Bonsai.t ->
on_click:unit Core.Or_error.t Bonsai_web.Effect.t Bonsai_web.Bonsai.t ->
string Bonsai_web.Bonsai.t ->
Bonsai_web.Bonsai.graph @ local ->
Bonsai_web.Vdom.Node.t Bonsai_web.Bonsai.twith_error is a simple way to handle errors that can occur in the buttons on_click action. It is visually the same as the regular button.
While this makes error handling easy for the developer, a dedicated error UI e.g. using Error_handler.component usually improves the user experience.
val with_error_compact :
?test_selector:Bonsai_web.Test_selector.t Bonsai_web.Bonsai.t ->
?confirm:bool Bonsai_web.Bonsai.t ->
?loading:[ `Yes | `No | `While_on_click_in_flight ] Bonsai_web.Bonsai.t ->
?dropdown:unit Core.Or_error.t Skyline_context_menu_v1.t Bonsai_web.Bonsai.t ->
?on_dropdown_open:unit Bonsai_web.Effect.t Bonsai_web.Bonsai.t ->
?autofocus:bool Bonsai_web.Bonsai.t ->
?disabled:bool Bonsai_web.Bonsai.t ->
?secondary:bool Bonsai_web.Bonsai.t ->
?intent:Skyline_theme_v1.Color.t Bonsai_web.Bonsai.t ->
?tooltip:string Bonsai_web.Bonsai.t ->
?icon:Codicons.t Bonsai_web.Bonsai.t ->
on_click:unit Core.Or_error.t Bonsai_web.Effect.t Bonsai_web.Bonsai.t ->
string Bonsai_web.Bonsai.t ->
Bonsai_web.Bonsai.graph @ local ->
Bonsai_web.Vdom.Node.t Bonsai_web.Bonsai.twith_error_compact is the same as with_error (including all the caveats!) but uses the compact button layout instead