action-button

v1.0.8

v1.0.7

v1.0.6

v1.0.5

v1.0.3

v1.0.2

v1.0.1

v1.0.0

STATUS

Passing

DOWNLOADS

LICENSE

MIT

VISIBILITY

Public

PUBLISHED

5 months ago

SIZE

8 KB

Renders a HTML Button element and a dropdown list into a parent container;

1 contributor

Use action-button in your project ?

Copied

npm i @bit/lekanmedia.shared-ui.action-button

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.dev

Component Example

React

Vue

Angular

Add dependency...

Just

import

any of the 1 million components

and packages in Bit or NPM to the example.

import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';

<section>
  <div style={style}>
    <RoundAddButton />
  </div>
  <div style={style}>
    <DownloadButton />
  </div>
  <div style={style}>
    <RectAddButton />
  </div>
  <div style={style}>
    <StartDateButton />
  </div>
  <div style={style}>
    <EndDateButton />

modifieddraft

<section>
  <div style={style}>
    <RoundAddButton />
  </div>
  <div style={style}>
    <DownloadButton />
  </div>
  <div style={style}>
    <RectAddButton />
  </div>
  <div style={style}>
    <StartDateButton />
  </div>
  <div style={style}>
    <EndDateButton />

modifieddraft

SelectButton (

props.className:string,

props.addClass:string,

props.listClass:string,

props.text:string,

props.textStyle:object,

props.icon:string,

props.iconStyle:object,

props.dropdownStyle:object,

props.children:JSX.Element,

props.onClick:function

) : JSX.Element

Renders a HTML Button element and a dropdown list into a parent container;

Arguments

props.className: string

The default class of the button.

props.addClass: string

Add extra class styles to overwrite default class.

props.listClass: string

Add extra class styles to overwrite default class of the dropdown list.

props.text: string

Text for the button.

props.textStyle: object

Style Inline CSS styles for the button text.

props.icon: string

Google Material Icon for the button.

props.iconStyle: object

Style Inline CSS styles for icon.

props.dropdownStyle: object

Style Inline CSS styles for the dropdown list.

props.children: JSX.Element

HTML list elements such as <li></li>, <ol></ol>, <option></option> rendered as dropdown list elements.

props.onClick: function

onclick event function of the button.

Returns

JSX.Element

A `button` and a dropdown list toggled by the `button`.

Dropdown (

props.className:string,

props.addClass:string,

props.listClass:string,

props.text:string,

props.textStyle:object,

props.icon:string,

props.iconStyle:object,

props.dropdownStyle:object,

props.children:JSX.Element,

props.onClick:function

) : JSX.Element

Renders a HTML Button element and a dropdown list into a parent container;

Arguments

props.className: string

The default class of the button.

props.addClass: string

Add extra class styles to overwrite default class.

props.listClass: string

Add extra class styles to overwrite default class of the dropdown list.

props.text: string

Text for the button.

props.textStyle: object

Style Inline CSS styles for the button text.

props.icon: string

Google Material Icon for the button.

props.iconStyle: object

Style Inline CSS styles for icon.

props.dropdownStyle: object

Style Inline CSS styles for the dropdown list.

props.children: JSX.Element

HTML list elements such as <li></li>, <ol></ol>, <option></option> rendered as dropdown list elements.

props.onClick: function

onclick event function of the button.

Returns

JSX.Element

A `SelectButton` and dropdown list with a different CSS styling.

DownloadButton (

props.className:string,

props.width:number,

props.height:number,

props.children:JSX.Element,

props.onClick:function

) : JSX.Element

Renders a HTML Button element

Arguments

props.className: string

The default class of the button.

props.width: number

Width of the button.

props.height: number

Height of the button.

props.children: JSX.Element

React Elements

props.onClick: function

onclick event function of the button.

Returns

JSX.Element

A `SuccessSecondaryButton` with a download icon.

RoundAddButton (

props.className:string,

props.addClass:string,

props.width:number,

props.height:number,

props.iconStyle:object,

props.children:JSX.Element,

props.onClick:function

) : JSX.Element

Renders a round IconButton.

Arguments

props.className: string

The default class of the button.

props.addClass: string

Add extra class styles to overwrite default class.

props.width: number

Width of the button.

props.height: number

Height of the button.

props.iconStyle: object

Style Inline CSS styles for icon.

props.children: JSX.Element

React Elements

props.onClick: function

onclick event function of the button.

Returns

JSX.Element

A `RoundIconButton` with an _add_ icon.

RectAddButton (

props.className:string,

props.addClass:string,

props.width:number,

props.height:number,

props.text:string,

props.textStyle:object,

props.iconStyle:object,

props.onClick:function

) : JSX.Element

Renders an icon and a text into an PrimaryButton.

Arguments

props.className: string

The default class of the button.

props.addClass: string

Add extra class styles to overwrite default class.

props.width: number

Width of the button.

props.height: number

Height of the button.

props.text: string

Text for the button.

props.textStyle: object

Style Inline CSS styles for the button text.

props.iconStyle: object

Style Inline CSS styles for icon.

props.onClick: function

onclick event function of the button.

Returns

JSX.Element

A `TextIconButton` with an _add_ icon and _Add_ text.

SearchButton (

props.className:string,

props.addClass:string,

props.width:number,

props.height:number,

props.iconStyle:object,

props.children:JSX.Element,

props.onClick:function

) : JSX.Element

Renders a round IconButton.

Arguments

props.className: string

The default class of the button.

props.addClass: string

Add extra class styles to overwrite default class.

props.width: number

Width of the button.

props.height: number

Height of the button.

props.iconStyle: object

Style Inline CSS styles for icon.

props.children: JSX.Element

React Elements

props.onClick: function

onclick event function of the button.

Returns

JSX.Element

A `RoundIconButton` with a _search_ icon.