Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Avendaosander/Plataforma-social/llms.txt

Use this file to discover all available pages before exploring further.

The Button component wraps a native HTML <button> element with a composable set of style variants. It uses clsx and tailwind-merge for class resolution, meaning any className you pass is merged cleanly with the internal variant classes — no specificity conflicts. The component accepts all standard HTML button attributes via ...rest, so onClick, type, disabled, aria-*, and any other native attribute work out of the box. 
import Button from "@/components/ui/Button"

​
Props

​
variant
"solid" | "outline" | "flat" | "ghost"
default:"\"solid\""
Controls the visual style of the button. solid renders a filled background, outline renders a transparent background with a colored ring border, flat uses a lightly tinted background at reduced opacity, and ghost renders text only with no background.
​
color
"primary" | "secondary" | "destructive"
default:"\"primary\""
Maps to the project’s custom Tailwind color palette. primary uses the seagreen scale, secondary uses the biscay (blue) scale, and destructive uses the maroon (red) scale.
​
size
"sm" | "md" | "lg"
default:"\"md\""
Controls the font size of the button label. sm = text-sm, md = text-base, lg = text-lg. Padding is not affected by size — use className to override padding directly.
​
marginX
"none" | "auto"
default:"\"none\""
Sets horizontal margin. "auto" applies mx-auto for centering the button within a flex or block container. "none" applies mx-0.
​
shape
"none" | "sm" | "md" | "lg" | "full"
default:"\"md\""
Controls the border radius. "none" = square corners (rounded-none), "sm" = rounded-lg, "md" = rounded-xl, "lg" = rounded-2xl, "full" = pill shape (rounded-full).
​
isOnlyIcon
boolean
default:"false"
When true, applies m-0 to reset all margin on the button, preventing extra surrounding space around an icon-only button. Use this when children is omitted and only startContent or endContent is rendered.
​
startContent
ReactNode
A React node rendered before the button label inside the <button> element. Commonly used for leading icons.
​
endContent
ReactNode
A React node rendered after the button label inside the <button> element. Commonly used for trailing icons or badges.
​
...rest
React.ButtonHTMLAttributes<HTMLButtonElement>
All standard HTML button attributes — onClick, type, disabled, aria-label, form, etc. — are forwarded directly to the underlying <button> element.

​
Variants

The four variant options each have distinct visual semantics. All variants support the same three color values and respect dark mode automatically.
VariantLight modeDark mode override
solidFilled background matching the color tokenprimary switches from seagreen to storm-900
outlineTransparent fill + ring-2 border in the color tokenNo automatic override — use className
flat20% opacity fill of the color tokenprimary shifts to storm-300/20; secondary to full biscay-950
ghostText color only, no background or borderprimary text switches to white

​
Color palette reference

The three color values map to custom Tailwind color scales defined in tailwind.config.ts:
  • primary → seagreen scale (seagreen-900 for backgrounds, seagreen-900 for text/ring)
  • secondary → biscay scale (deep blue, biscay-950)
  • destructive → maroon scale (red, maroon-900)

​
Usage

<Button variant="solid" color="primary">
  Save Changes
</Button>

​
Dark Mode

Dark mode is driven by Tailwind’s class strategy (darkMode: 'class' in tailwind.config.ts). The dark class is toggled on <html> at runtime — see ButtonDarkMode.tsx for the reference implementation.
The solid + primary combination automatically switches its background from bg-seagreen-900 to bg-storm-900 in dark mode — no extra className needed.
The outline variant does not apply an automatic dark mode override. When using outline on a dark background (e.g., inside a card), add dark:bg-inherit dark:ring-white dark:text-white via className to maintain contrast. This pattern is used in CardPost for the follow button:
<Button
  variant="outline"
  color="primary"
  shape="md"
  className="px-3 py-0.5 dark:bg-inherit dark:ring-white dark:text-white"
>
  Seguir
</Button>

Build docs developers (and LLMs) love

Get started for freeTalk to us