Valid value constants
Overview
The helper tuples enumerate the core accepted values for the shared Bulma helper props — public API for building prop types and validation. Each is a readonly as const tuple, so (typeof validColors)[number] gives you the exact string-literal union. useBulmaClasses (and the per-concern hooks) silently ignore unrecognized values. A few props accept documented extras beyond their tuple, noted in the table below: the display* props also take 'none' (rendering the is-hidden* visibility class), the color props also take 'inherit' and 'current', and the gap props also take each step as a number — so validate against the prop's TypeScript union, not the tuple alone, when you need the full contract.
Some components also export a tuple for their own props. Those are not helper tuples, and they follow the Constants table in sections of their own.
Import
import {
validColors,
validSizes,
validViewports,
} from '@allxsmith/bestax-bulma';
Every constant on this page is importable the same way.
Without loading the library
Tooling that only needs the helper tuples can take them from the ./constants
subpath, which serves the value module on its own, with no React and no
component code:
import { validColors } from '@allxsmith/bestax-bulma/constants';
It resolves from both ESM and CommonJS. This is how
@allxsmith/eslint-plugin-bestax
validates helper values at lint time rather than keeping a copy of them. The
form control constants and the
table color constant are not on this subpath.
Constants
| Constant | Values | Used by prop family |
|---|---|---|
validColors | 'primary', 'link', 'info', 'success', 'warning', 'danger', the greys, and 'black', 'white', 'light', 'dark', each of black/white also in a -bis and -ter shade | color, backgroundColor helper props. Component color modifier unions are narrower and component-specific; some validColors members ship no is-<color> CSS (deprecated, warned in dev). See each component's Props table. Scheme-aware components extend their bgColor unions with validSchemeColors (below). |
validColorShades | '00', '05' … '95', 'invert', 'light', 'dark', 'soft', 'bold', 'on-scheme' | colorShade, backgroundColorShade |
validSchemeColors | 'scheme-main', 'scheme-main-bis', 'scheme-main-ter', 'scheme-invert', 'scheme-invert-bis', 'scheme-invert-ter' | Scheme-aware bgColor/backgroundColor values. Emit no class — components render them as a dark-mode-safe inline background-color: var(--bulma-<value>) style (Bulma ships no has-background-scheme-* helpers). |
validSizes | '0'–'6', 'auto' | Spacing: m, mt, mr, mb, ml, mx, my, p, pt, … px, py |
validGaps | '0', '0.5', '1', '1.5', '2', '2.5', '3', '3.5', '4', '4.5', '5', '5.5', '6', '6.5', '7', '7.5', '8' | gap, columnGap, rowGap (is-gap-<value>, is-column-gap-<value>, is-row-gap-<value>), which also take each step as a number. Each whole step is 0.5rem, a different scale from validSizes. |
validTextSizes | '1'–'7' | textSize (+ textSizeMobile … textSizeFullhd) |
validAlignments | 'centered', 'justified', 'left', 'right' | textAlign (+ viewport variants) |
validTextTransforms | 'capitalized', 'lowercase', 'uppercase', 'italic' | textTransform |
validTextWeights | 'light', 'normal', 'medium', 'semibold', 'bold' | textWeight |
validFontFamilies | 'sans-serif', 'monospace', 'primary', 'secondary', 'code' | fontFamily |
validDisplays | 'block', 'flex', 'inline', 'inline-block', 'inline-flex', 'grid' — the display* props additionally accept 'none' | display (+ displayMobile … displayFullhd) |
validVisibilities | 'hidden', 'sr-only', 'invisible' | visibility (+ viewport variants) |
validFlexDirections | 'row', 'row-reverse', 'column', 'column-reverse' | flexDirection |
validFlexWraps | 'nowrap', 'wrap', 'wrap-reverse' | flexWrap |
validJustifyContents | 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly', 'start', 'end', 'left', 'right' | justifyContent |
validAlignContents | 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly', 'stretch' | alignContent |
validAlignItems | 'stretch', 'flex-start', 'flex-end', 'center', 'baseline', 'start', 'end' | alignItems |
validAlignSelfs | 'auto', 'flex-start', 'flex-end', 'center', 'baseline', 'stretch' | alignSelf |
validFlexGrowShrink | '0'–'5' | flexGrow, flexShrink |
validViewports | 'mobile', 'tablet', 'tablet-only', 'touch', 'desktop', 'desktop-only', 'widescreen', 'widescreen-only', 'fullhd' | viewport (responsive modifier) |
validFloats | 'left', 'right' | float |
validOverflows | 'clipped', 'auto', 'clip', 'hidden', 'scroll', 'visible' | overflow. clipped renders is-clipped; the rest render is-overflow-<value>. |
validAxisOverflows | 'auto', 'clip', 'hidden', 'scroll', 'visible' | overflowX, overflowY (is-overflow-x-<value>, is-overflow-y-<value>) |
validInteractions | 'unselectable', 'clickable' | interaction |
validCursors | 'pointer', 'help' | cursor. These share no class stem: pointer renders is-clickable and help renders is-cursor-help. |
validRadii | 'radiusless', 'small', 'normal', 'large', 'rounded' | radius. radiusless removes the radius (is-radiusless); the sizes set one (has-radius-<value>). |
validShadows | 'shadowless' | shadow. It removes the shadow, so <Box shadow /> renders nothing. |
validResponsives | 'mobile', 'narrow' | responsive. A different axis from validViewports: these are the Bulma column and table modifiers. |
validPositions | 'absolute', 'fixed', 'relative', 'static', 'sticky' | pos (is-position-<value>) |
validAspectRatios | '1by1', '5by4', '4by3', '3by2', '5by3', '16by9', '2by1', '3by1', '4by5', '3by4', '2by3', '3by5', '9by16', '1by2', '1by3' | aspectRatio (is-aspect-ratio-<value>) |
Form control constants
Checkbox, Radio and Switch each export the values their own color and size props accept, as as const tuples like the ones above, and each prop's type is built from its tuple. They are not the helper tuples under another name: the colors are a subset of validColors, and the sizes are element sizes, not the spacing scale in validSizes. Each component checks membership at runtime too, so a value outside its tuple adds no modifier class.
| Constant | Values | Used by prop family |
|---|---|---|
checkboxColors | 'primary', 'link', 'info', 'success', 'warning', 'danger' | Checkbox color |
checkboxSizes | 'small', 'normal', 'medium', 'large' | Checkbox size |
radioColors | 'primary', 'link', 'info', 'success', 'warning', 'danger' | Radio color |
radioSizes | 'small', 'normal', 'medium', 'large' | Radio size |
switchColors | 'primary', 'link', 'info', 'success', 'warning', 'danger' | Switch color and passiveType |
switchSizes | 'small', 'normal', 'medium', 'large' | Switch size |
Import them from the package root. The ./constants subpath serves the helper module only, so tooling that reads these loads the main entry:
import { switchColors, switchSizes } from '@allxsmith/bestax-bulma';
type SwitchColor = (typeof switchColors)[number];
type SwitchSize = (typeof switchSizes)[number];
Table color constant
Tr, Th and Td share one color tuple, validTableColors, and the TableColor type their color prop takes is built from it. Like the form control colors, it is a subset of validColors, and each component checks membership at runtime, so a value outside the tuple adds no modifier class.
| Constant | Values | Used by prop family |
|---|---|---|
validTableColors | 'primary', 'link', 'info', 'success', 'warning', 'danger', 'black', 'dark', 'light', 'white' | Tr, Th and Td color |
Import it from the package root. TableColor is exported there too, so a runtime check can narrow to it:
import { validTableColors, type TableColor } from '@allxsmith/bestax-bulma';
function isTableColor(value: string): value is TableColor {
return (validTableColors as readonly string[]).includes(value);
}
Typing with (typeof …)[number]
Because the arrays are as const, indexing them with number yields the union of their literal values — the same idiom the library uses internally for its prop types:
import { validColors, validSizes } from '@allxsmith/bestax-bulma';
type Color = (typeof validColors)[number]; // 'primary' | 'link' | … | 'dark'
type Spacing = (typeof validSizes)[number]; // '0' | '1' | … | '6' | 'auto'
interface MyComponentProps {
color?: Color;
m?: Spacing;
}
They also work as runtime validators:
function isColor(value: string): value is (typeof validColors)[number] {
return (validColors as readonly string[]).includes(value);
}
validSizes is for spacing, not element sizesvalidSizes ('0'–'6' | 'auto') enumerates the spacing helper scale — the values for m/p props like m="4" (→ m-4). Element size props are a different axis: Button, Icon, and friends declare an inline union such as 'small' | 'medium' | 'large' (Button adds 'normal'), not validSizes. Don't use validSizes to type a component's size prop.
See Also
useBulmaClasses: The hook that consumes these values and generates the helper classes.- Helper guides: Task-oriented walkthroughs of the helper-prop system (color, spacing, typography, flex, visibility).