nds-assignment v2.0.0
Submit Button
A Submit button is a primary kind of button. Use it for either submitting or sending information on a form, or accepting terms on a prompted message.
Installation
To install and save it in your package.json dependencies, run the command below npm:
npm install nds-assignment
or, if you are using yarn:
yarn add nds-assignment
and then import the component into your project:
import * as React from 'react';
import ReactDOM from 'react-dom';
import { SubmitButton } from 'nds-assignment';
function App() {
return <SubmitButton />;
}
Type modifiers
The submit button component comes in two different variants: Default
and Inverted
Default
Use this button when the background is lighter (color-bg1
, color-bg2
, color-bg3
or light mode).
As its name states, this type will be provided by default so there is no need to specify the type.
<SubmitButton />
This will return a medium-sized default button
Inverted
Use this button when the background is darker than the content (dark mode).
To change the variant of the button, use the type
attribute.
<SubmitButton type="inverted" />
Size modifiers
The submit button component comes in three different sizing options: small
, medium
and large
.
Use them minding carefully both the size of your master component and the size of the viewport you are targeting.
The default size variant is medium
To change the size of the button, use the size
attribute.
<SubmitButton size="small" />
or
<SubmitButton size="large" />
Use the small button for portrait views in small devices (mobile).
Use the large button for larger desktop screens.
Handling clicks
Use the onButtonClick
handler to pass the function the button will trigger when pressed.
const myFunction = () => {
console.log("Pressed");
}
...
<SubmitButton onButtonClick={myFunction} />
Disabling buttons
To disable the button just add the disabled
attribute.
<SubmitButton disabled />
Correct usage
Never use more than one Submit button on the same view.
The submit button is a primary button that should trigger ONLY the desired action.
To add new actions use instead a secondary button or a plain text button.
Placement
Place the button in the users’ reading pattern according to the flow of your form.
Vertical flow (Z-flow / F-flow)
Horizontal flow
Accessibility
Use always the corresponding variant according to the background color in order to maintain a correct contrast ratio.
Use the adequate size according to the viewport you're targeting or the size of your master component to make it reachable.
Make sure the submit button is the last element on your tabulation order.