[Bug]: 🧩RTL support issues in ButtonGroup and DropdownMenu #101
Description
Prerequisites
- I have searched existing issues to ensure this bug hasn't been reported already
- I have tested this with the latest version of the components
Bug description
RTL support issues in ButtonGroup and DropdownMenu
When using the library in RTL mode (dir="rtl" set on <html> or <body>), some components do not behave correctly.
Issues
-
ButtonGroup border radius
- The border radius is applied using
rounded-l-*/rounded-r-*classes. - These are physical directions and do not automatically adapt to RTL.
- As a result, the rounding is incorrect when
dir="rtl"is active.
- The border radius is applied using
-
DropdownMenu direction
- The
DropdownMenucomponent does not inherit thedirattribute from<html>or<body>. - This leads to incorrect alignment and positioning when the app is in RTL mode.
- The
Suggested Improvements
- Replace physical Tailwind classes (
rounded-l-*/rounded-r-*) with logical direction utilities (rounded-s-*/rounded-e-*) to ensure proper behavior in both LTR and RTL. - Ensure that
DropdownMenuinherits thedirattribute automatically (or allow passingdiras a prop that defaults to the closest ancestor).
Steps to reproduce
- Set the
dir="rtl"attribute on the parent container of the<ButtonGroup>component. - Render the following JSX:
<ButtonGroup selectedKeys={[]}>
<ButtonGroupItem id="archive">Archive</ButtonGroupItem>
<ButtonGroupItem id="edit">Edit</ButtonGroupItem>
<ButtonGroupItem id="delete">Delete</ButtonGroupItem>
</ButtonGroup>
- Observe that the
border-radiusand spacing do not mirror correctly in RTL mode.
Expected behavior
- The first button should have rounded top-right corners.
- The last button should have rounded top-left corners.
- The middle buttons should have no rounded corners.
- The spacing between buttons should be mirrored.
Actual behavior
Code example
import {
ButtonGroup,
ButtonGroupItem,
} from "@/components/base/button-group/button-group";
export default function Home() {
return (
<div dir="rtl" className="flex flex-col gap-2 p-24">
Untitle ui
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
<ButtonGroup selectedKeys={[]}>
<ButtonGroupItem id="archive">Archive</ButtonGroupItem>
<ButtonGroupItem id="edit">Edit</ButtonGroupItem>
<ButtonGroupItem id="delete">Delete</ButtonGroupItem>
</ButtonGroup>
</main>
</div>
);
}Browser
Chrome
Device type
Desktop
Component version
latest
Environment details
- OS: Windows
- Browser: Chrome
- Untitled UI Version: latest
- Nextjs Version: 15.5.2
Screenshots/Videos
No response
Console errors
Additional context
No response
Accessibility impact
- This bug affects keyboard navigation
- This bug affects screen reader users
- This bug affects focus management
- This bug affects color contrast or visual accessibility