Skip to main content

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.