← Back to Index

Button Group Component Figma: card-btn / button-sm

Audited: 2026-06-26

Structural Properties Specification
ViewModel: ButtonGroupViewModel : ContainerSurfaceViewModel : ComponentViewModel
Design tokens sourced from Figma file: ALPA mobile app (1).fig · Component: card-btn / button-sm

Design Tokens (from Figma)

Dimensions

card-btn width
116 px
card-btn height
106 px
button-sm width
151 px
button-sm height
36 px
button-sm corner radius
4 px

Colors

Tile background
#FFFFFF
Tile title text
#05273E
button-sm fill
#007BC2
button-sm label text
#FFFFFF

Typography

Tile title
Lora SemiBold 20px
Button label
Futura LT Pro Bold 12px

Layer Structure

[SYMBOL] card-btn ×3 116×106
  [FRAME] body 100×72
    [TEXT] title #05273e
    [INSTANCE] icon 24×24
[SYMBOL] button-sm #007bc2 151×36 r=4
  [TEXT] label #ffffff Futura LT Pro Bold 12px

Feed Contract Fields (ContainerSurfaceViewModel — inherited)

These fields come from ContainerDto via the dynamic feed and are shared by all four container ViewModels. All token fields are server-populated from the component-type → theme mapping — not set by editors (D37).

API field (ContainerDto)ViewModel propertyNotes
backgroundTokenBackgroundToken: stringSurface/* token resolved via IThemeResolver at render time
cornerRadiusTokenCornerRadiusToken: string?BorderRadius/* token; null → fallback BorderRadius/M (8 px) (D38)
paddingTokenPadding: ThicknessSpacing/* token resolved to pixel thickness at bind time
isSortableIsSortable: boolfalse = comms team has locked this container's feed position; user cannot reorder (D36). Default true.
Button 1 Button 2 Button 3 Buttons Collection of ButtonItem objects (ObservableCollection<ButtonItem>) ButtonItem Properties: Text (string), Icon (ImageSource), Link (string) ButtonItem[0] Example Text: "Action 1" Icon: ImageSource Link: "Page1" Repeat for remaining buttons Layout Horizontal row (equal columns) Icon above text per button

Figma Structural Specs

Dimensions & Layout

PropertyValue
card-btn
Width116 px
Height106 px
Background Fill#ffffff
Stroke Weight1px
button-sm
Width151 px
Height36 px
Background Fill#007bc2
Corner Radius4px

Layer Tree

[SYMBOL] card-btn  116×106  #ffffff
  [FRAME] body  100×72
    [TEXT] United Airlines  100×44  #05273e  Lora SemiBold 20px
    [INSTANCE] united/committee  24×24  icon
  [INSTANCE] i-heart  18×18  favorite
[SYMBOL] button-sm  151×36  #007bc2  r=4
  [TEXT] Member Number  127×12  #ffffff  Futura LT Pro Bold 12px

Source: docs/ui-refresh-1821/figma-component-specs.json — Figma key(s): card-btn, button-sm — extracted 2026-06-02