Button

To trigger an operation.

# When To Use

A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic.

We provide 5 types of button:

Default button: indicate a series of actions without priority.
Dashed button: used for adding action commonly.
Text button: used for the most secondary action.
Link button: used for external links.

# Examples

Type

There are primary button, default button, dashed button, text button and link button.

import React from 'react';
import { Button } from 'james-ui-custom';

interface Props { }

const Apps: React.FC = (props: Props) => {
    return (
      <>
       <Button type='default'>Default Button</Button>
       <Button type='primary'>Primary Button</Button>
       <Button type="text">Text Button</Button>
       <Button type="link">Link Button</Button>
      </>
    )
}

export default Apps;

Disabled

Button components can display disabled.

import React from 'react';
import { Button } from 'james-ui-custom';

interface Props { }

const Apps: React.FC = (props: Props) => {
    return (
      <>
       <Button type='default' disabled={true}>Default Button</Button>
       <Button type='dashed' disabled={true}>Dashed Button</Button>
       <Button type="text" disabled={true}>Text Button</Button>
       <Button type="link" disabled={true}>Link Button</Button>
      </>
    )
}

export default Apps;

A loading indicator can be added to a button by setting the loading property on the Button.

import React from 'react';
import { Button } from 'james-ui-custom';

interface Props { }

const Apps: React.FC = (props: Props) => {
    return (
      <>
       <Button type='default' loading={true}>Loading</Button>
      </>
    )
}

export default Apps;