Add custom button wrapper

Mainly avoiding having to set adjusted rounded corners everywhere

components/__init__.py

@@ -1,4 +1,5 @@
 from components.button import button_toggle as button_toggle
+from components.button import button as button
 from components.card import card as card
 from components.card import expanable_card as expanable_card
 from components.dialog import dialog as dialog

components/button.py

@@ -1,7 +1,33 @@
-from typing import Callable
+from typing import Callable, Literal, Any
 
 import mesop as me
 
+from components import helpers
+
+
+@me.component()
+def button(
+  label: str | None = None,
+  *,
+  on_click: Callable[[me.ClickEvent], Any] | None = None,
+  type: Literal["raised", "flat", "stroked"] | None = None,
+  color: Literal["primary", "accent", "warn"] | None = None,
+  disable_ripple: bool = False,
+  disabled: bool = False,
+  style: me.Style | None = None,
+  key: str | None = None,
+) -> None:
+  me.button(
+    label=label,
+    on_click=on_click,
+    type=type,
+    color=color,
+    disable_ripple=disable_ripple,
+    disabled=disabled,
+    key=key,
+    style=helpers.merge_styles(me.Style(border_radius=10), style),
+  )
+
 
 @me.component()
 def button_toggle(

dialogs/add_comparisons.py

@@ -25,11 +25,10 @@ def add_comparisons():
       on_selection_change=on_select_comparison,
     )
     with mex.dialog_actions():
-      me.button(
+      mex.button(
         "Close",
         key="dialog_show_add_comparison",
         on_click=handlers.on_close_dialog,
-        style=me.Style(border_radius="10"),
       )
 
 

dialogs/add_row.py

@@ -22,10 +22,10 @@ def add_row():
       with me.box(
         style=me.Style(display="flex", justify_content="end", margin=me.Margin(bottom=15))
       ):
-        me.button(
+        mex.button(
           "Generate",
           on_click=on_click_generate_variables,
-          style=me.Style(background="#EBF1FD", border_radius="10"),
+          style=me.Style(background="#EBF1FD"),
         )
       variable_names = set(parse_variables(state.prompt))
       with me.box(style=me.Style(display="flex", flex_direction="column")):
@@ -41,13 +41,12 @@ def add_row():
           )
 
     with mex.dialog_actions():
-      me.button(
+      mex.button(
         "Close",
         on_click=on_close_dialog,
         key="dialog_show_add_row",
-        style=me.Style(border_radius="10"),
       )
-      me.button("Add", type="flat", on_click=on_click_add_row, style=me.Style(border_radius="10"))
+      mex.button("Add", type="flat", on_click=on_click_add_row)
 
 
 def on_close_dialog(e: me.ClickEvent):

dialogs/generate_prompt.py

@@ -21,17 +21,15 @@ def generate_prompt():
       style=me.Style(width=DIALOG_INPUT_WIDTH),
     )
     with mex.dialog_actions():
-      me.button(
+      mex.button(
         "Close",
         key="dialog_show_generate_prompt",
         on_click=handlers.on_close_dialog,
-        style=me.Style(border_radius="10"),
       )
-      me.button(
+      mex.button(
         "Generate",
         type="flat",
         on_click=on_click_generate_prompt,
-        style=me.Style(border_radius="10"),
       )
 
 

dialogs/load_prompt.py

@@ -21,14 +21,13 @@ def load_prompt():
         type="flat",
         color="primary",
         on_upload=on_upload_prompt,
-        style=me.Style(font_weight="bold", border_radius=10),
+        style=me.Style(border_radius=10),
       )
       with mex.dialog_actions():
-        me.button(
+        mex.button(
           "Close",
           key="dialog_show_load",
           on_click=handlers.on_close_dialog,
-          style=me.Style(border_radius="10"),
         )
 
 

dialogs/model_settings.py

@@ -43,11 +43,10 @@ def model_settings():
         )
 
     with mex.dialog_actions():
-      me.button(
+      mex.button(
         "Close",
         key="dialog_show_model_settings",
         on_click=handlers.on_close_dialog,
-        style=me.Style(border_radius="10"),
       )
 
 

dialogs/prompt_variables.py

@@ -20,10 +20,10 @@ def prompt_variables():
       with me.box(
         style=me.Style(display="flex", justify_content="end", margin=me.Margin(bottom=15))
       ):
-        me.button(
+        mex.button(
           "Generate",
           on_click=on_click_generate_variables,
-          style=me.Style(background="#EBF1FD", border_radius="10"),
+          style=me.Style(background="#EBF1FD"),
         )
       variable_names = set(parse_variables(state.prompt))
       with me.box(style=me.Style(display="flex", flex_direction="column")):
@@ -39,11 +39,10 @@ def prompt_variables():
           )
 
     with mex.dialog_actions():
-      me.button(
+      mex.button(
         "Close",
         on_click=handlers.on_close_dialog,
         key="dialog_show_prompt_variables",
-        style=me.Style(border_radius="10"),
       )
 
 

dialogs/prompt_version_history.py

@@ -23,11 +23,10 @@ def prompt_version_history():
       on_selection_change=on_select_version,
     )
     with mex.dialog_actions():
-      me.button(
+      mex.button(
         "Close",
         key="dialog_show_version_history",
         on_click=handlers.on_close_dialog,
-        style=me.Style(border_radius="10"),
       )
 
 

dialogs/update_title.py

@@ -19,18 +19,16 @@ def update_title():
       style=me.Style(width=DIALOG_INPUT_WIDTH),
     )
     with mex.dialog_actions():
-      me.button(
+      mex.button(
         "Cancel",
         on_click=handlers.on_close_dialog,
         key="dialog_show_title",
-        style=me.Style(border_radius="10"),
       )
-      me.button(
+      mex.button(
         "Save",
         type="flat",
         disabled=not state.temp_title.strip(),
         on_click=on_save_title,
-        style=me.Style(border_radius="10"),
       )
 
 

main.py

@@ -108,10 +108,10 @@ def app():
           ):
             with me.tooltip(message="Run prompt"):
               me.icon("play_arrow")
-          me.button(
+          mex.button(
             "Generate prompt",
             disabled=bool(state.prompt),
-            style=me.Style(background="#EBF1FD", border_radius="10"),
+            style=me.Style(background="#EBF1FD"),
             on_click=handlers.on_open_dialog,
             key="dialog_show_generate_prompt",
           )
@@ -137,12 +137,11 @@ def app():
               on_select_rating=on_select_rating,
               on_click_run=on_click_eval_run,
             )
-            me.button(
+            mex.button(
               label="Add row",
               type="flat",
               style=me.Style(
                 margin=me.Margin(top=10),
-                border_radius="10",
               ),
               key="dialog_show_add_row",
               on_click=handlers.on_open_dialog,