ButtonSubmit

A form submit button that displays loading and success state.

It implements the <Button> component.

Styles

Import the styles within a Next.js custom app in pages/_app.js.
import 'device-agnostic-ui/public/components/ButtonSubmit.css';
Also import the styles for the components this component implements.
import 'device-agnostic-ui/public/components/Button.css';
import 'device-agnostic-ui/public/components/Loading.css';

Props

success

TypeBoolean (optional)
Defaultfalse

When true and the loading prop is false, sets the <button> element’s disabled attribute and indicates success with a tick icon.

...props

Type…* (optional)

Additional props for the container; a <Button> component.

Examples

Deep import.
import ButtonSubmit from 'device-agnostic-ui/public/components/ButtonSubmit.js';
Deep require.
const ButtonSubmit = require('device-agnostic-ui/public/components/ButtonSubmit.js');
Index import. Convenient, but technically inferior to a deep import.
import { ButtonSubmit } from 'device-agnostic-ui';
Index require. Convenient, but technically inferior to a deep require.
const { ButtonSubmit } = require('device-agnostic-ui');
Submit button.
import { ButtonSubmit } from 'device-agnostic-ui';

const result = <ButtonSubmit>Submit</ButtonSubmit>;
If the form submission is loading.
import { ButtonSubmit } from 'device-agnostic-ui';

const result = <ButtonSubmit loading>Submit</ButtonSubmit>;
If the form submission was successful.
import { ButtonSubmit } from 'device-agnostic-ui';

const result = <ButtonSubmit success>Submit</ButtonSubmit>;

Tags