Button

A button for on-page interactions, typically in forms.

It implements the <button> element.

It automatically has the disabled attribute until mounted, to prevent a default action from happening if the user clicks quickly after SSR.

Note: Links are semantically different and have separate, distinctly styled components.

Styles

Import the styles within a Next.js custom app in pages/_app.js.
import 'device-agnostic-ui/public/components/Button.css';

Props

Use any valid <button> props.

Examples

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

const result = <Button>Label</Button>;
Disabled button.
import { Button } from 'device-agnostic-ui';

const result = <Button disabled>Label</Button>;

Tags