Button

A button component that extends the HTML button element.

Import

import { Button } from '@pixby/ui';

• Button: The base button component.

Usage

Result

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Live Editor

Props

colorScheme

Use the colorScheme prop to change the colors of the button. You can use one of the built-in schemes, or pass a list of class names to create your own.

Result

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Live Editor

size

Use the size prop to change the size of the button. You can use one of the built-in size, or pass a list of class names to create your own.

Result

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Live Editor

isLoading

Use the isLoading prop to show a spinner and disable to button.

Result

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Live Editor

isRaised

Use the isRaised prop to add a shadow to the button.

Result

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Live Editor

Adding icons

Just add an SVG or a custom icon component as children to the button.

Result

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Live Editor

Using the button as a link

Sometimes you might want to use the button a link (the HTML a tag). This can be achieved by passing the as prop to the button. When doing so, all props for an anchor will be available to use.

Result

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Live Editor

Accessability

Button follows the practices for buttons found at WAI-ARIA Authoring Practices.

• Button has the role of button.
• When Button has focus, Space or Enter activates it.
• When Button is disabled, aria-disabled is set to true.