Spec Helpers

The @semantic-ui/specs package provides shared constants and helper functions for common component patterns. These reduce duplication when authoring specs.

Helper Functions

getVariations()

Get multiple variation constants at once.

Syntax

getVariations(names)

Parameters

Returns

Array of variation objects.

Usage

import { getVariations } from '@semantic-ui/specs';

export default {
  variations: [
    ...getVariations(['size', 'colored', 'fluid', 'compact']),
    // Add custom variations
  ],
};

Available variations: size, colored, floated, attached, compact, padded, circular, fluid

getStates()

Get multiple state constants at once.

Syntax

getStates(names)

Parameters

Returns

Array of state objects.

Usage

import { getStates } from '@semantic-ui/specs';

export default {
  states: getStates(['hover', 'focus', 'active', 'disabled', 'loading']),
};

Available states: hover, focus, active, loading, pressed, disabled

modifyVariation()

Customize a variation with overrides.

Syntax

modifyVariation(variation, overrides)

Parameters

Returns

Modified variation object.

Usage

import { SIZE_VARIATION, modifyVariation } from '@semantic-ui/specs';

export default {
  variations: [
    modifyVariation(SIZE_VARIATION, {
      usageLevel: 3,
    }),
  ],
};

Variation Constants

Complete variation objects ready to use.

import { SIZE_VARIATION, COLORED_VARIATION } from '@semantic-ui/specs';

export default {
  variations: [SIZE_VARIATION, COLORED_VARIATION],
};

Available variation constants: SIZE_VARIATION, COLORED_VARIATION, FLOATED_VARIATION, ATTACHED_VARIATION, COMPACT_VARIATION, PADDED_VARIATION, CIRCULAR_VARIATION, FLUID_VARIATION

State Constants

Complete state objects ready to use.

import { DISABLED_STATE, LOADING_STATE } from '@semantic-ui/specs';

export default {
  states: [DISABLED_STATE, LOADING_STATE],
};

Available state constants: HOVER_STATE, FOCUS_STATE, ACTIVE_STATE, LOADING_STATE, PRESSED_STATE, DISABLED_STATE

Options Arrays

Pre-defined option arrays for custom variations.

import { COLOR_OPTIONS, SIZE_OPTIONS } from '@semantic-ui/specs';

export default {
  variations: [
    {
      name: 'Tint',
      attribute: 'tint',
      options: COLOR_OPTIONS,
    },
    {
      name: 'Size',
      attribute: 'size',
      options: SIZE_OPTIONS,
    },
  ],
};

Available options arrays: COLOR_OPTIONS, SIZE_OPTIONS, FLOATED_OPTIONS, ATTACHED_OPTIONS, COMPACT_OPTIONS, PADDED_OPTIONS, HORIZONTAL_ALIGNED_OPTIONS, VERTICAL_ALIGNED_OPTIONS, EMPHASIS_OPTIONS