Secondary (Outline) Button Figma: button-secondary / outline primitive tier

Updated: 2026-06-26

Audited: 2026-06-26

Outline (transparent bg, visible border) button — three shape variants: rectangular, full-pill (100px), and partial-pill (38px radius)

Figma screens: Advocacy 4877:11274, MEC 4684:7914, Flight Finder 4713:25117, Duty Period · file key: psH738AqHDxuMyFm897f9r · captured 2026-06-26

Primitive tier — same fill logic, three shapes. All variants share the same token palette: transparent bg + 1px (or 2px) border + Futura PT Demi 15px uppercase label. The shape (border-radius) and border width differ per context. The label color adapts to the container surface: navy on light bg, white on navy/dark bg (MEC dark card). A leading or trailing icon slot may be present but the label is always rendered.

Design tokens sourced from Figma file key psH738AqHDxuMyFm897f9r · Advocacy (4877:11274), MEC (4684:7914), Flight Finder (4713:25117) · captured 2026-06-26

Live CSS Preview

Rectangular (no radius, 1px border)
Advocacy — "DONATE & JOIN"

Full pill (radius:100px, 2px border)
MEC — "SIGN UP FOR TEXT ALERTS"

Partial pill (radius:38px, 1px border)
Flight Finder — "ADVANCED SEARCH" / Duty Period — "MANAGE"

White-on-navy (MEC dark card context)

Design Tokens

Shared Across All Shapes

Background

transparent

Horizontal padding

24 px

Vertical padding

12 px

Label font

Futura PT Demi

Label size

15 px

Label transform

uppercase

Letter spacing

0.6 px

Shape Variant Properties

Rectangular border-radius

Rectangular border width

1 px

Full-pill border-radius

100 px

Full-pill border width

2 px

Partial-pill border-radius

38 px

Partial-pill border width

1 px

Colors — navy context (default)

Border color

border/blue-dk #05273e

Label color

text/primary #05273e

Colors — white context (on dark bg)

Border color

white/500 #ffffff

Label color

text/on-brand white

Variants

Shape	CSS modifier	border-radius	Border width	Instance in app
Rectangular	`--rect`	`0`	1 px	Advocacy — "DONATE & JOIN" (full-width row)
Full pill	`--pill-full`	`100px`	2 px	MEC — "SIGN UP FOR TEXT ALERTS" (inside dark MEC card)
Partial pill	`--pill-38`	`38px`	1 px	Flight Finder — "ADVANCED SEARCH"; Duty Period — "MANAGE"

Note: The notification-flight-status expand button (caret-down only, no label) uses border-radius:38px with no text — it shares the pill-38 shape but is a distinct component (see notification-flight-status-component.html).

Layer Tree

└── .alpa-btn-secondary · BUTTON · flex-row · gap-8px · transparent bg
    ├── [leading icon] · optional · 16×16px
    ├── label · TEXT · Futura PT Demi 15px · uppercase · tracking 0.6px
    └── [trailing icon] · optional · 16×16px

ViewModel

Reuse the existing ButtonViewModel from ComponentViewModels.cs — the secondary style is expressed by the ButtonStyle.Secondary discriminator already defined alongside ButtonCardViewModel. Add a ButtonShape enum to ButtonViewModel to drive the three radius variants.

public enum ButtonShape { Rect, PillFull, Pill38 }

└── ButtonViewModel : SurfaceViewModel (existing — extend)
    ├── Label : string?
    ├── Icon : string?
    ├── Link : string?
    ├── IsEmergency : bool
    ├── IsTile : bool
    ├── Style : ButtonStyle — add to ButtonViewModel (Primary / Secondary)
    └── Shape : ButtonShape — NEW — Rect / PillFull / Pill38 (Secondary only)

Developer Notes

Three shapes, one component: All three shape variants render through the same AlpaButtonSecondary.razor component (or a single AlpaButton.razor with a Style discriminator). The shape is CSS-only — pass a Shape parameter that resolves to the appropriate BEM modifier class.
Border width is shape-dependent: Full-pill (--pill-full) uses 2px to visually match the bolder MEC treatment. Rectangular and partial-pill use 1px. Do not flatten these to a single 1px rule.
Color context: On light backgrounds (Advocacy, Flight Finder, Duty Period), use navy border+text. On dark/navy backgrounds (MEC dark card), apply --white modifier to flip to white border+text. The consumer screen/card sets the background; the button adapts via modifier or CSS custom property.
Expand button (flight status): The icon-only caret-down button in notification-flight-status uses the same border-radius:38px shell but has no text label and no letter-spacing. Spec'd separately — do not share this component.
ButtonStyle placement: ButtonStyle enum is currently only referenced by ButtonCardViewModel. To use it in ButtonViewModel, move it to a shared location or add a separate ButtonViewModelStyle enum. Keep the factory-mapping clean — both enums can coexist until a D-decision resolves the naming.
Implementation gated: No Razor/C# work until Epic AB#2087 (Presentation Extraction).

Blazor Component API

Target home: ALPAMobile.HybridUi. Component file: ButtonSecondary.razor. Extends existing ButtonViewModel.

Parameter	Type	Required	Description
`Vm`	`ButtonViewModel`	Yes	Label, icon, link, Style=Secondary, Shape.
`OnTap`	`EventCallback<ButtonViewModel>`	No	Fires on button tap; consumer handles navigation or action.

Razor Usage (target)

@* Advocacy — rectangular outline *@
<AlpaButtonSecondary Vm="@new ButtonViewModel { Label = "DONATE & JOIN", Style = ButtonStyle.Secondary, Shape = ButtonShape.Rect }"
                     OnTap="@HandleDonateTap" />

@* MEC — full pill, white (inside dark card) *@
<AlpaButtonSecondary Vm="@new ButtonViewModel { Label = "SIGN UP FOR TEXT ALERTS", Style = ButtonStyle.Secondary, Shape = ButtonShape.PillFull }"
                     OnTap="@HandleSignUpTap" />

@* Flight Finder — partial pill *@
<AlpaButtonSecondary Vm="@new ButtonViewModel { Label = "ADVANCED SEARCH", Style = ButtonStyle.Secondary, Shape = ButtonShape.Pill38 }"
                     OnTap="@HandleAdvancedSearch" />

CSS Class Reference (target)

Classes will live in ALPAMobile.HybridUi/wwwroot/css/alpa-components.css under the alpa-btn-secondary BEM block.

Class	Scope	Key rules
`.alpa-btn-secondary`	Root button	`display:inline-flex; align-items:center; justify-content:center; gap:8px; background:transparent; border:1px solid var(--border-dk,#05273e); color:var(--text-primary,#05273e); font-family:var(--font-family/ui); font-size:15px; font-weight:600; letter-spacing:0.6px; text-transform:uppercase; cursor:pointer; padding:12px 24px`
`.alpa-btn-secondary--rect`	Rectangular shape	`border-radius:0`
`.alpa-btn-secondary--pill-full`	Full-pill shape	`border-radius:100px; border-width:2px`
`.alpa-btn-secondary--pill-38`	Partial-pill shape	`border-radius:38px`
`.alpa-btn-secondary--white`	White on dark bg	`border-color:white; color:white`