ibm-carbon

IBM Carbon: density token view

Generated from the normalized JSON extract. Edit the JSON source and rerun the parent render-markdown.ps1 renderer; do not edit this page by hand.

• Scope: density-relevant public component metrics
• Architecture model: component size variants; density is not a global product mode
• Evidence: repository plus official component documentation
• Exact token coverage: high for component size metrics
• System report
• Source record
• Authoritative JSON

Snapshot

Field	Value
commit	82f04fbfdb385323883f4f8e3ce97a14865a744a
retrieved	2026-08-11

How density is activated

Mechanism	Public implementation
button	React size prop -> Carbon size class/layout mixin
textInput	React size prop
dataTable	React size prop -> bx—data-table—{size} class

Density-relevant tokens and values

Token or mapping	Type	Public values and metadata	Source
Button.size.height	component-size-map	valuesPx: xs: 24; sm: 32; md: 40; lg: 48; xl: 64; 2xl: 80	Carbon Button size documentation and sources/ibm-carbon/upstream/carbon/packages/styles/scss/components/button/_button.scss
layout.size(‘height’)	Sass component semantic	consumer: Button block-size and icon-only inline-size	sources/ibm-carbon/upstream/carbon/packages/styles/scss/components/button/_button.scss
layout.density(‘padding-inline’)	Sass component semantic	consumer: Button inline padding	sources/ibm-carbon/upstream/carbon/packages/styles/scss/components/button/_button.scss
$button-font-size	dimension	value: 0.875rem; derivedPx: 14	sources/ibm-carbon/upstream/carbon/packages/styles/scss/components/button/_vars.scss
$button-height	dimension	value: 3rem; derivedPx: 48; status: legacy/default public variable	sources/ibm-carbon/upstream/carbon/packages/styles/scss/components/button/_vars.scss
DataTable.row.height	component-size-map	valuesPx: xs: 24; sm: 32; md: 40; lg: 48; xl: 64	sources/ibm-carbon/upstream/carbon/packages/styles/scss/components/data-table/_data-table.scss
DataTable.cell.padding-block	component-size-map	valuesPx: xs: 2px 2px; sm: 7px 6px; md: 7px 6px; xl: spacing-05 spacing-05	sources/ibm-carbon/upstream/carbon/packages/styles/scss/components/data-table/_data-table.scss
TextInput.size.height	component-size-map	valuesPx: sm: 32; md: 40; lg: 48	Carbon Text Input size documentation and sources/ibm-carbon/upstream/carbon/packages/styles/scss/components/text-input/_text-input.scss

How tokens reach components

Component or boundary	Mapping
button	size prop -> generated size class -> layout.size(height) and layout.density(padding-inline); button typography remains 14px across ordinary sizes
dataTable	size prop -> explicit table size modifier -> exact row height/padding CSS
textInput	size prop -> size class -> height rules
coexistence	different component sizes can coexist because selection is component-local

Public evidence gaps

• The captured layout forwarding file does not include the generated Sass maps that resolve every layout.density padding value; exact component heights are independently present in public component CSS/docs.
• No public global density-mode token collection was found because Carbon exposes component size APIs instead.

Embedded authoritative JSON

Show raw JSON

{
  "system": "IBM Carbon",
  "scope": "density-relevant public component metrics",
  "model": "component size variants; density is not a global product mode",
  "snapshot": {"commit": "82f04fbfdb385323883f4f8e3ce97a14865a744a", "retrieved": "2026-08-11"},
  "activation": {
    "button": "React size prop -> Carbon size class/layout mixin",
    "textInput": "React size prop",
    "dataTable": "React size prop -> bx--data-table--{size} class"
  },
  "tokens": [
    {"name": "Button.size.height", "type": "component-size-map", "valuesPx": {"xs": 24, "sm": 32, "md": 40, "lg": 48, "xl": 64, "2xl": 80}, "source": "Carbon Button size documentation and sources/ibm-carbon/upstream/carbon/packages/styles/scss/components/button/_button.scss"},
    {"name": "layout.size('height')", "type": "Sass component semantic", "consumer": "Button block-size and icon-only inline-size", "source": "sources/ibm-carbon/upstream/carbon/packages/styles/scss/components/button/_button.scss"},
    {"name": "layout.density('padding-inline')", "type": "Sass component semantic", "consumer": "Button inline padding", "source": "sources/ibm-carbon/upstream/carbon/packages/styles/scss/components/button/_button.scss"},
    {"name": "$button-font-size", "type": "dimension", "value": "0.875rem", "derivedPx": 14, "source": "sources/ibm-carbon/upstream/carbon/packages/styles/scss/components/button/_vars.scss"},
    {"name": "$button-height", "type": "dimension", "value": "3rem", "derivedPx": 48, "status": "legacy/default public variable", "source": "sources/ibm-carbon/upstream/carbon/packages/styles/scss/components/button/_vars.scss"},
    {"name": "DataTable.row.height", "type": "component-size-map", "valuesPx": {"xs": 24, "sm": 32, "md": 40, "lg": 48, "xl": 64}, "source": "sources/ibm-carbon/upstream/carbon/packages/styles/scss/components/data-table/_data-table.scss"},
    {"name": "DataTable.cell.padding-block", "type": "component-size-map", "valuesPx": {"xs": "2px 2px", "sm": "7px 6px", "md": "7px 6px", "xl": "spacing-05 spacing-05"}, "source": "sources/ibm-carbon/upstream/carbon/packages/styles/scss/components/data-table/_data-table.scss"},
    {"name": "TextInput.size.height", "type": "component-size-map", "valuesPx": {"sm": 32, "md": 40, "lg": 48}, "source": "Carbon Text Input size documentation and sources/ibm-carbon/upstream/carbon/packages/styles/scss/components/text-input/_text-input.scss"}
  ],
  "componentMappings": {
    "button": "size prop -> generated size class -> layout.size(height) and layout.density(padding-inline); button typography remains 14px across ordinary sizes",
    "dataTable": "size prop -> explicit table size modifier -> exact row height/padding CSS",
    "textInput": "size prop -> size class -> height rules",
    "coexistence": "different component sizes can coexist because selection is component-local"
  },
  "unavailable": [
    "The captured layout forwarding file does not include the generated Sass maps that resolve every layout.density padding value; exact component heights are independently present in public component CSS/docs.",
    "No public global density-mode token collection was found because Carbon exposes component size APIs instead."
  ]
}