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 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.
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' | overflow |
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' | radius. The prop removes the border radius; there is no value that adds one. |
validShadows | 'shadowless' | shadow. Same shape as radius: 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. |
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).