Valid value constants
Overview
The valid* 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, and every tuple member produces a helper class except validSchemeColors, whose values instead produce the bulmaHelperStyles inline style (no class). 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), and the color props also take 'inherit' and 'current' — so validate against the prop's TypeScript union, not the tuple alone, when you need the full contract.
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 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 |
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];
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).