taste-skill / Components / shadcn/ui Buttons

shadcn/ui Button Styles

10 distinct shadcn/ui button styles extracted from ui.shadcn.com — heights, padding, 10px/18px/18px 0px 0px 18px radius, colors — with copy-paste CSS and Tailwind classes.

Source: computed styles extracted from https://ui.shadcn.com on 2026-10-26 by the taste-skill extractor. Brand fonts may be proprietary; previews fall back to Inter / system fonts. shadcn/ui is a trademark of its owner; this page documents publicly visible styling for reference and is not affiliated with shadcn/ui.

Rendered on the shadcn/ui canvas

Button Button Secondary Outline Button Group Analytics Button New Get Started View Components

Button specs

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Button	32px	`8px 16px`	`10px`	`#F5F5F5` `#000000`	`none`	`14px / 500`
Button	32px	`0px 10px`	`18px`	`#171717` `#FAFAFA`	`none`	`14px / 500`
Secondary	32px	`0px 12px`	`18px`	`#F5F5F5` `#171717`	`none`	`14px / 500`
Outline	32px	`0px 12px`	`18px`	`#FFFFFF` `#0A0A0A`	`1px solid #E5E5E5`	`14px / 500`
Button Group	32px	`0px 12px`	`18px 0px 0px 18px`	`#FFFFFF` `#0A0A0A`	`1px solid #E5E5E5`	`14px / 500`
Analytics	32px	`8px 10px`	`19.6px`	`#F5F5F5` `#171717`	`none`	`14px / 500`
Button	32px	`8px 12px`	`18px`	`rgba(229, 229, 229, 0.5)` `#0A0A0A`	`none`	`14px / 400`
New	31px	`0px 10px`	`10px`	`#000000` `#FAFAFA`	`none`	`12.8px / 500`
Get Started	35px	`0px 12px`	`26px`	`#000000` `#FAFAFA`	`none`	`14px / 500`
View Components	36px	`0px 12px`	`26px`	`#F5F5F5` `#171717`	`none`	`14px / 500`

Copy-paste code

Button 1 — Button

<!-- shadcn/ui button 1: "Button" -->
<a class="inline-flex items-center justify-center h-[32px] py-[8px] px-[16px] rounded-[10px] bg-[#F5F5F5] text-[#000000] text-[14px] font-[500] shadow-[rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0)_0px_0px_0px_0px]">Button</a>

/* plain CSS */
.btn-shadcn-1 { height:32px; padding:8px 16px; border-radius:10px; background:#F5F5F5; color:#000000; border:0; font-size:14px; font-weight:500; box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px; }

Button 2 — Button

<!-- shadcn/ui button 2: "Button" -->
<a class="inline-flex items-center justify-center h-[32px] py-[0px] px-[10px] rounded-[18px] bg-[#171717] text-[#FAFAFA] text-[14px] font-[500]">Button</a>

/* plain CSS */
.btn-shadcn-2 { height:32px; padding:0px 10px; border-radius:18px; background:#171717; color:#FAFAFA; border:0; font-size:14px; font-weight:500; }

Button 3 — Secondary

<!-- shadcn/ui button 3: "Secondary" -->
<a class="inline-flex items-center justify-center h-[32px] py-[0px] px-[12px] rounded-[18px] bg-[#F5F5F5] text-[#171717] text-[14px] font-[500]">Secondary</a>

/* plain CSS */
.btn-shadcn-3 { height:32px; padding:0px 12px; border-radius:18px; background:#F5F5F5; color:#171717; border:0; font-size:14px; font-weight:500; }

Button 4 — Outline

<!-- shadcn/ui button 4: "Outline" -->
<a class="inline-flex items-center justify-center h-[32px] py-[0px] px-[12px] rounded-[18px] bg-[#FFFFFF] text-[#0A0A0A] border-[1px] border-solid border-[#E5E5E5] text-[14px] font-[500]">Outline</a>

/* plain CSS */
.btn-shadcn-4 { height:32px; padding:0px 12px; border-radius:18px; background:#FFFFFF; color:#0A0A0A; border:1px solid #E5E5E5; font-size:14px; font-weight:500; }

Button 5 — Button Group

<!-- shadcn/ui button 5: "Button Group" -->
<a class="inline-flex items-center justify-center h-[32px] py-[0px] px-[12px] rounded-[18px_0px_0px_18px] bg-[#FFFFFF] text-[#0A0A0A] border-[1px] border-solid border-[#E5E5E5] text-[14px] font-[500]">Button Group</a>

/* plain CSS */
.btn-shadcn-5 { height:32px; padding:0px 12px; border-radius:18px 0px 0px 18px; background:#FFFFFF; color:#0A0A0A; border:1px solid #E5E5E5; font-size:14px; font-weight:500; }

Button 6 — Analytics

<!-- shadcn/ui button 6: "Analytics" -->
<a class="inline-flex items-center justify-center h-[32px] py-[8px] px-[10px] rounded-[19.6px] bg-[#F5F5F5] text-[#171717] text-[14px] font-[500]">Analytics</a>

/* plain CSS */
.btn-shadcn-6 { height:32px; padding:8px 10px; border-radius:19.6px; background:#F5F5F5; color:#171717; border:0; font-size:14px; font-weight:500; }

Button 7 — Button

<!-- shadcn/ui button 7: "Button" -->
<a class="inline-flex items-center justify-center h-[32px] py-[8px] px-[12px] rounded-[18px] bg-[rgba(229,229,229,0.5)] text-[#0A0A0A] text-[14px] font-[400]">Button</a>

/* plain CSS */
.btn-shadcn-7 { height:32px; padding:8px 12px; border-radius:18px; background:rgba(229, 229, 229, 0.5); color:#0A0A0A; border:0; font-size:14px; font-weight:400; }

Button 8 — New

<!-- shadcn/ui button 8: "New" -->
<a class="inline-flex items-center justify-center h-[31px] py-[0px] px-[10px] rounded-[10px] bg-[#000000] text-[#FAFAFA] text-[12.8px] font-[500]">New</a>

/* plain CSS */
.btn-shadcn-8 { height:31px; padding:0px 10px; border-radius:10px; background:#000000; color:#FAFAFA; border:0; font-size:12.8px; font-weight:500; }

Button 9 — Get Started

<!-- shadcn/ui button 9: "Get Started" -->
<a class="inline-flex items-center justify-center h-[35px] py-[0px] px-[12px] rounded-[26px] bg-[#000000] text-[#FAFAFA] text-[14px] font-[500] shadow-[rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0)_0px_0px_0px_0px]">Get Started</a>

/* plain CSS */
.btn-shadcn-9 { height:35px; padding:0px 12px; border-radius:26px; background:#000000; color:#FAFAFA; border:0; font-size:14px; font-weight:500; box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px; }

Button 10 — View Components

<!-- shadcn/ui button 10: "View Components" -->
<a class="inline-flex items-center justify-center h-[36px] py-[0px] px-[12px] rounded-[26px] bg-[#F5F5F5] text-[#171717] text-[14px] font-[500] shadow-[rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0)_0px_0px_0px_0px,rgba(0,0,0,0)_0px_0px_0px_0px]">View Components</a>

/* plain CSS */
.btn-shadcn-10 { height:36px; padding:0px 12px; border-radius:26px; background:#F5F5F5; color:#171717; border:0; font-size:14px; font-weight:500; box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px; }

Transition seen on these buttons: cubic-bezier(0.4, 0, 0.2, 1)

More shadcn/ui

shadcn/ui full token spec shadcn/ui style guide shadcn/ui Cards shadcn/ui Pricing Table Tailwind CSS vs shadcn/ui

Same component, other brands

Linear Buttons Stripe Buttons Resend Buttons Vercel Buttons Supabase Buttons Raycast Buttons Cursor Buttons Mintlify Buttons Dub Buttons Trigger.dev Buttons PlanetScale Buttons Neon Buttons

Get all 30 full SKILL.md specs (Cursor / Claude Code / Codex ready) plus the Pro growth skills.

See taste-skill Pro →