@nathan3boss/ui

    Helper Text

    The HelperText component is a shared text primitive for default guidance, success feedback, errors, and warnings below fields.

    Usage

    Selection saved successfully.
    import React from 'react';
import { HelperText } from '@nathan3boss/ui/helper-text';
import { ExampleFrame } from '@docs-support/example-frame';

export default () => {
  return (
    <ExampleFrame>
      <HelperText color="success">Selection saved successfully.</HelperText>
    </ExampleFrame>
  );
};

    Colors

    Use default, success, warning, and danger to match the tone of the surrounding field.

    Choose a safe route for the next quest.Selection saved successfully.This spell name is already reserved.This choice may lock advanced spells.
    import React from 'react';
import { HelperText } from '@nathan3boss/ui/helper-text';
import { ExampleFrame } from '@docs-support/example-frame';

export default () => {
  return (
    <ExampleFrame direction="column" gap="8px">
      <HelperText color="default">Choose a safe route for the next quest.</HelperText>
      <HelperText color="success">Selection saved successfully.</HelperText>
      <HelperText color="danger">This spell name is already reserved.</HelperText>
      <HelperText color="warning">This choice may lock advanced spells.</HelperText>
    </ExampleFrame>
  );
};

    API

    HelperText

    Renders reusable helper text for fields and contextual guidance.

    PropertyDescriptionTypeDefault Value
    sizeAligns the helper text scale with the related field.InputSize | undefinedmd
    colorApplies the semantic color used by the helper text.HelperTextColor | undefineddefault