Primary Action Button Figma: btn · Primary button

Updated: 2026-07-01 09:33 ET

Audited: 2026-07-01 09:33 ET

Full-width CTA button with pointed endcap — Structural Specification

Figma node: 5348:29589 (btn) · 5348:30225 (Primary button) · file key: psH738AqHDxuMyFm897f9r

Reusable across features. First seen on FTDT Landing (AB#1908, node 4535:14038). The component wraps a blue rectangle + optional icons + a pointed endcap SVG and a diamond chevron SVG. The endcap+chevron overlap by −4 px (negative margin) to create the continuous pointed silhouette. The label and icon slots are the only variable parts.

Design tokens sourced from Figma file key psH738AqHDxuMyFm897f9r · Component: btn / Primary button · extracted 2026-06-26

Call to Action — Variants & Behavior (Teamwork mobile requirements, Space 4173)

The CTA button is full-width (spans the content area) with a centered, all-caps label. Three variants (per mobile-requirements — Call to Action; the modern component-set is canonical per reconciliation D-B1):

Variant	Visual	Behavior
Primary	Solid filled background (this spec's endcap style).	Triggers the navigation / action defined by the link target.
Secondary	Outlined, no fill — see Secondary Button.	Triggers the navigation / action defined by the link target.
Emergency Hotline	Solid filled + right-pointing chevron; Home tab only.	Triggers the native iOS/Android call modal (tap-to-call) — no in-app navigation.

Stacking: Primary and Secondary appear stacked vertically when both are present on the same screen.

Fields: Button Label (configured — fixed text per instance, e.g. "FILE A PDR") · Button Variant (configured) · Link (configured — destination or action). Source: Teamwork Space 4173 · data source per Content Contract.

Design Tokens (from Figma)

Dimensions

Total height

48 px

Button rect width

flex-1 (fills container)

Padding (btn rect)

16 px all sides (--xsmall)

Icon ↔ label gap

12 px

Endcap width

8 px

Endcap height

48 px

Vector (chevron) width

15.69 px

Vector (chevron) height

48 px

Endcap overlap (negative margin)

−4 px

Optional icon slot

16×16 px (leading or trailing)

Colors

Button fill (--interactive/blue-lt)

#007BC2

Endcap fill

#007BC2

Chevron (Vector) fill

#007BC2

Label text (--text/on-brand)

#FFFFFF

Typography — Label

Font family

Futura PT : Demi (--font-family/body)

Font size

15 px (--font-size/other/button)

Font weight

500 (Demi)

Letter spacing

0.6 px (Figma: 4)

Text transform

uppercase

Line height

1 (none)

Text align

center

Layer Structure

[FRAME] Primary button · w-full flex items-center
  [FRAME] btn with point · flex-1 mr[-4px]
    [FRAME] btn · flex-1 p[16px] gap[12px] bg-blue
      [INSTANCE?] leading icon · 16×16px (optional)
      [TEXT] label · Futura Demi 15px uppercase
      [INSTANCE?] trailing icon · 16×16px (optional)
    [VECTOR] endcap · 8×48px · fill #007bc2
  [VECTOR] Vector (chevron) · 15.69×48px · fill #007bc2

Visual Diagram

SVG Asset Paths

Both assets are stored in ALPAMobile/wwwroot/images/ and referenced via <img> tags (not inline SVG) for consistent cross-platform rendering.

Asset	File	ViewBox	Path data
Endcap	`ftdt-endcap.svg`	0 0 8 48	`M8 23.5L0 48V0L8 23.5Z`
Chevron (Vector)	`ftdt-vector.svg`	0 0 15.69 48	`M7.332 0.5L15.162 23.503L7.327 47.5H0.689L8.646 23.146L8.697 22.986L8.644 22.829L1.039 0.5H7.332Z`

Note: file names use ftdt- prefix because they were first introduced for FTDT. When this component is promoted to HybridUi, rename to a neutral prefix (e.g. btn-action-endcap.svg, btn-action-chevron.svg).

Blazor Component API

Target home: ALPAMobile.HybridUi (shared Razor class library). Currently implemented inline in ALPAMobile/Components/Pages/FTDTLanding.razor with CSS in alpa-components.css. Promote to HybridUi after Presentation Extraction (AB#2087) lands.

Parameter	Type	Required	Description
`Label`	`string`	Yes	Button label text. Rendered uppercase by CSS — pass sentence case.
`OnClick`	`EventCallback`	Yes	Action to invoke on tap.
`LeadingIcon`	`string?`	No	Image source path for a leading icon (16×16 px slot). Absent → label is centered.
`TrailingIcon`	`string?`	No	Image source path for a trailing icon (16×16 px slot).
`AriaLabel`	`string?`	No	Override for screen readers when label alone is insufficient.

Razor Usage (target)

<AlpaActionButton Label="Add Duty Period"
                   OnClick="NavigateToAddDutyPeriodAsync" />

<!-- With leading icon -->
<AlpaActionButton Label="Search Flights"
                   LeadingIcon="images/icon-search.svg"
                   OnClick="OpenSearchAsync" />

CSS Class Reference (current implementation)

Classes live in ALPAMobile/wwwroot/css/alpa-components.css. The ftdt-add- prefix will be replaced with a neutral BEM block name (e.g. alpa-action-btn) when promoted to HybridUi.

Class	Element	Key rules
`.ftdt-add-wrapper`	Outer flex row	`display:flex; align-items:stretch; width:100%`
`.ftdt-add-btn-point`	Btn + endcap group	`display:flex; flex:1; align-items:stretch; margin-right:-4px`
`.ftdt-add-btn`	`<button>` rect	`flex:1; bg:#007bc2; color:#fff; padding:16px; font-weight:500; font-size:15px; letter-spacing:0.6px; text-transform:uppercase; line-height:1`
`.ftdt-add-endcap`	Endcap image wrapper	`position:relative; width:8px; height:48px; flex-shrink:0`
`.ftdt-add-vector`	Chevron image wrapper	`position:relative; width:16px; height:48px; flex-shrink:0`

Implementation Notes

Topic	Note
Font weight	Figma specifies `Futura PT : Demi`. No `.ttf`/`.otf` Futura files are bundled; iOS provides system "Futura" (Medium/Bold weights only). `font-weight: 500` maps to iOS Medium = closest to Demi. Using `600` would render as Bold. See codebase font convention (line 198 of original implementation).
Endcap fill color	Both SVG assets are filled `#007bc2` (blue), not navy. This was verified by downloading the Figma assets directly — visual screenshots made the chevron appear darker.
Inline SVG vs <img>	Endcap and Vector are rendered via `<img src="...">` with `preserveAspectRatio="none"` in the SVG root. Inline SVG caused rendering inconsistencies in BlazorWebView; the img approach is stable.
Overlap (-4 px)	The `margin-right: -4px` is on the btn-with-point group, not the `<button>` element itself. Moving it to the button caused the endcap to render incorrectly.
Height	48 px comes from the endcap/vector SVG height. The button rect stretches to match (`align-items: stretch` on the flex wrapper, not an explicit height).
Width	The button is full-width within its container (`flex: 1`). It does not bleed to screen edges — it lives inside the 24 px page padding column.

Source: Figma file key psH738AqHDxuMyFm897f9r · nodes 5348:29589, 5348:30225 · First implemented: AB#1908 (FTDT Landing) · Branch: feat/AB1908-ftdt-01 · Extracted 2026-06-26