Currently, I am working on button components in NextJS with Tailwindcss and I am encountering a problem with some variants. Everything works fine, except when I remove the children (button text), I notice something strange that I can't quite figure out. When a button has both text and an icon, it looks good. But when there's just a single icon, there seems to be some extra space on the left. How can I get rid of this space?
I have tried removing the gap and adding padding to the text, but the empty space still remains.
Here is my screenshot for reference
My code:
import { ElevatedButton } from "../components";
import { MdDataSaverOff } from "react-icons/md";
export default function Home() {
return (
<>
<ElevatedButton
iconRight={<MdDataSaverOff size={18} />}
type={"tonal"}
></ElevatedButton>
</>
);
}
Component:
import { Icon } from "../../../elements/Icon";
function ElevatedButton(props) {
return (
<>
<button className={`btn ${props.type}`} onClick={props.onClick}>
<Icon iconLeft={props.iconLeft} />
<p>{props.children}</p>
<Icon iconRight={props.iconRight} />
</button>
</>
);
}
export { ElevatedButton };
Element:
function Icon(props) {
return (
<>
{props.iconLeft}
{props.iconRight}
</>
);
}
export { Icon };
Tailwind settings:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
/*Common Buttons*/
.btn {
@apply mt-[4px] flex h-[40px] items-center gap-[8px] rounded-full py-[10px] px-[24px];
}
.elevated {
@apply bg-blue-500;
}
.tonal {
@apply bg-blue-100;
}
}