taste-skill / Components / Trigger.dev Buttons

Trigger.dev Button Styles

2 distinct Trigger.dev button styles extracted from trigger.dev — heights, padding, 4px radius, colors — with copy-paste CSS and Tailwind classes.

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

Rendered on the Trigger.dev canvas

AI agents Media processing

Button specs

Rendered	Height	Padding	Radius	Background / Text	Border	Font
AI agents	40px	`0px 12px`	`4px`	`#212327` `#D7D9DD`	`1px solid #1C1E21`	`16px / 400`
Media processing	40px	`0px 12px`	`4px`	`#121317` `#B5B8C0`	`1px solid #1C1E21`	`16px / 400`

Copy-paste code

Button 1 — AI agents

<!-- Trigger.dev button 1: "AI agents" -->
<a class="inline-flex items-center justify-center h-[40px] py-[0px] px-[12px] rounded-[4px] bg-[#212327] text-[#D7D9DD] border-[1px] border-solid border-[#1C1E21] text-[16px] font-[400] 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.05)_0px_1px_2px_0px]">AI agents</a>

/* plain CSS */
.btn-trigger-1 { height:40px; padding:0px 12px; border-radius:4px; background:#212327; color:#D7D9DD; border:1px solid #1C1E21; font-size:16px; font-weight:400; 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.05) 0px 1px 2px 0px; }

Button 2 — Media processing

<!-- Trigger.dev button 2: "Media processing" -->
<a class="inline-flex items-center justify-center h-[40px] py-[0px] px-[12px] rounded-[4px] bg-[#121317] text-[#B5B8C0] border-[1px] border-solid border-[#1C1E21] text-[16px] font-[400]">Media processing</a>

/* plain CSS */
.btn-trigger-2 { height:40px; padding:0px 12px; border-radius:4px; background:#121317; color:#B5B8C0; border:1px solid #1C1E21; font-size:16px; font-weight:400; }

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

More Trigger.dev

Trigger.dev full token spec Trigger.dev style guide Trigger.dev Pricing Table Trigger.dev vs Inngest Trigger.dev vs Neon

Same component, other brands

Linear Buttons Stripe Buttons Resend Buttons Vercel Buttons Supabase Buttons Raycast Buttons Cursor Buttons Mintlify Buttons Dub 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 →