julienfroidefond/towercontrol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: adjust button layout in ButtonsSection for better spacing

Browse Source 
- Updated button container in `ButtonsSection` to use `space-x-4` for horizontal spacing between buttons, improving visual alignment and usability across variants, sizes, and states.
This commit is contained in:
Julien Froidefond
2025-09-30 23:06:04 +02:00
parent 703145a791
commit 307b3a8a14
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/ui-showcase/sections/ButtonsSection.tsx
View File

@@ -12,7 +12,7 @@ export function ButtonsSection() {
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div className="space-y-6"> <div className="space-y-6">
<h3 className="text-lg font-medium text-[var(--foreground)]">Variants</h3> <h3 className="text-lg font-medium text-[var(--foreground)]">Variants</h3>
<div className="space-y-4"> <div className="space-y-4 space-x-4">
<Button variant="primary">Primary Button</Button> <Button variant="primary">Primary Button</Button>
<Button variant="secondary">Secondary Button</Button> <Button variant="secondary">Secondary Button</Button>
<Button variant="ghost">Ghost Button</Button> <Button variant="ghost">Ghost Button</Button>
@@ -24,7 +24,7 @@ export function ButtonsSection() {
<div className="space-y-6"> <div className="space-y-6">
<h3 className="text-lg font-medium text-[var(--foreground)]">Sizes</h3> <h3 className="text-lg font-medium text-[var(--foreground)]">Sizes</h3>
<div className="space-y-4"> <div className="space-y-4 space-x-4">
<Button size="sm">Small Button</Button> <Button size="sm">Small Button</Button>
<Button size="md">Medium Button</Button> <Button size="md">Medium Button</Button>
<Button size="lg">Large Button</Button> <Button size="lg">Large Button</Button>
@@ -33,7 +33,7 @@ export function ButtonsSection() {
<div className="space-y-6"> <div className="space-y-6">
<h3 className="text-lg font-medium text-[var(--foreground)]">States</h3> <h3 className="text-lg font-medium text-[var(--foreground)]">States</h3>
<div className="space-y-4"> <div className="space-y-4 space-x-4">
<Button>Normal State</Button> <Button>Normal State</Button>
<Button disabled>Disabled State</Button> <Button disabled>Disabled State</Button>
<Button className="opacity-50">Loading State</Button> <Button className="opacity-50">Loading State</Button>