React Design System: component Button

Button

Buttons trigger actions when clicked.

Overview

API

Code

Component 'Button'

First, you need to import a component to your code (сheck component path is right):

import Button from "../../core/Button";

To use the component, copy and paste an example from the CODE tab.
Default props of component can be omitted, they are applied automatically. For example, you can skip the prop type='def', because 'def' is the default value of prop 'type'.

type

string = default

This prop set the shape of the component. Possible states: default | card | action | circle | icon. The default state is default.

view

string = filled

This prop set the view of the component. Possible states: filled | flat | smooth | outlined | raised . The default state is filled.

color

string = default

className

string

A space-delimited list of class names to pass along to a child element.

text

string

Action text. Haven't default state.

dense

boolean

Whether this button should use minimal styles.

fill

boolean = false

Whether this button should expand to fill its container. The default state is false.

icon

string

Name of a Blueprint UI icon to render before the text. For example, "tick"

rightIcon

string | element

Name of a Blueprint UI icon (or an icon element) to render before the text.

loading

boolean = false

If set to true, the button will display a centered loading spinner instead of its contents. The width of the button is not affected by the value of this prop. The default state is false

disabled

boolean = false

If set to true, the button will be disabled. The default state is false

onClick

func

Click event handler.

elementRef

any

A ref handler that receives the native HTML element backing this component.