Status

A component that displays a visual indicator based on validation status.

function Page() {
  return (
    <div
      style={{
        position: 'relative',
        border: '1px solid #ddd',
        width: '100px',
        padding: '15px',
        textAlign: 'center',
        borderRadius: '15px',
      }}
    >
      <Status status="invalid" />
      Example
    </div>
  );
}

Props

className

Typestring

Custom class name for the component.

status

Typeliteral

The validation status to display.

CSS Variables

Size

--ax-public-status-icon-size

--ax-public-status-size

Color

--ax-public-status-invalid-background-color

--ax-public-status-invalid-color

Miscellaneous

--ax-public-status-right