From 5181e6017e2f5b8391848dc562c0c11373031a90 Mon Sep 17 00:00:00 2001 From: Ahmad Hakim Date: Fri, 4 Sep 2026 10:53:11 +0200 Subject: [PATCH] doc: button group --- docs/components/button_group.md | 4 +++- native/lib/components/button_group_dropdown.py | 17 ++++------------- 2 files changed, 7 insertions(+), 14 deletions(-) diff --git a/docs/components/button_group.md b/docs/components/button_group.md index 7fd0c7e..c5bee9f 100644 --- a/docs/components/button_group.md +++ b/docs/components/button_group.md @@ -60,7 +60,9 @@ Wrap an `input` with buttons on either side. ## Dropdown Menu -A split button group with a `menu` as the second segment. +A split button group with a `menu` as the second segment. Since `menu.trigger` renders +inside an extra `
` wrapper, manually add edge classes (e.g. +`rounded-l-none border-l-0`) so it fuses cleanly with the adjacent button. **Props used:** see the [Menu](/docs/components/menu) docs for menu-specific props. diff --git a/native/lib/components/button_group_dropdown.py b/native/lib/components/button_group_dropdown.py index ac1a1fb..7cb2b1e 100644 --- a/native/lib/components/button_group_dropdown.py +++ b/native/lib/components/button_group_dropdown.py @@ -1,7 +1,7 @@ import reflex as rx from components.core.hugeicon import hi -from components.ui.button import button +from components.ui.button import button, button_variants from components.ui.button_group import button_group from components.ui.menu import menu @@ -11,23 +11,14 @@ def button_group_dropdown() -> rx.Component: button("Follow", variant="outline"), menu.root( menu.trigger( - button( - hi("ArrowDown01Icon"), - variant="outline", - class_name="pl-2!", - ), + hi("ArrowDown01Icon"), + class_name=f"""{button_variants("outline")} rounded-l-none border-l-0""", ), menu.content( menu.item("Mute Conversation"), menu.item("Mark as Read"), menu.item("Report Conversation"), - menu.item("Block User"), - menu.item("Share Conversation"), - menu.item("Copy Conversation"), - ), - menu.separator(), - menu.content( - menu.item("Delete Conversation", variant="destructive"), + class_name="w-[180px]", ), ), )