taste-skill / Components / Mintlify Buttons

Mintlify Button Styles

3 distinct Mintlify button styles extracted from mintlify.com — heights, padding, 4px radius, colors — with copy-paste CSS and Tailwind classes.

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

Rendered on the Mintlify canvas

Get started Contact sales Talk to sales

Button specs

Rendered	Height	Padding	Radius	Background / Text	Border	Font
Get started	42px	`12px 12px`	`4px`	`#08090A` `#FFFFFF`	`none`	`14px / 500`
Contact sales	34px	`8px 14px`	`4px`	`#08090A` `#FFFFFF`	`none`	`14px / 500`
Talk to sales	42px	`12px 20px`	`4px`	`#FEFDFB` `#121715`	`1px solid rgba(0, 0, 0, 0.05)`	`14px / 500`

Copy-paste code

Button 1 — Get started

<!-- Mintlify button 1: "Get started" -->
<a class="inline-flex items-center justify-center h-[42px] py-[12px] px-[12px] rounded-[4px] bg-[#08090A] text-[#FFFFFF] text-[14px] font-[500]">Get started</a>

/* plain CSS */
.btn-mintlify-1 { height:42px; padding:12px 12px; border-radius:4px; background:#08090A; color:#FFFFFF; border:0; font-size:14px; font-weight:500; }

Button 2 — Contact sales

<!-- Mintlify button 2: "Contact sales" -->
<a class="inline-flex items-center justify-center h-[34px] py-[8px] px-[14px] rounded-[4px] bg-[#08090A] text-[#FFFFFF] text-[14px] font-[500]">Contact sales</a>

/* plain CSS */
.btn-mintlify-2 { height:34px; padding:8px 14px; border-radius:4px; background:#08090A; color:#FFFFFF; border:0; font-size:14px; font-weight:500; }

Button 3 — Talk to sales

<!-- Mintlify button 3: "Talk to sales" -->
<a class="inline-flex items-center justify-center h-[42px] py-[12px] px-[20px] rounded-[4px] bg-[#FEFDFB] text-[#121715] border-[1px] border-solid border-[rgba(0,0,0,0.05)] text-[14px] font-[500]">Talk to sales</a>

/* plain CSS */
.btn-mintlify-3 { height:42px; padding:12px 20px; border-radius:4px; background:#FEFDFB; color:#121715; border:1px solid rgba(0, 0, 0, 0.05); font-size:14px; font-weight:500; }

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

More Mintlify

Mintlify full token spec Mintlify style guide Mintlify Cards Mintlify Pricing Table Resend vs Mintlify Mintlify vs Loops Mintlify vs PostHog

Same component, other brands

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

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

See taste-skill Pro →