Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free
Pricing
Developers
Platform
GitHub
Pricing
Login
AO
lekanmedia/ shared-ui

action-button

v1.0.8arrow_drop_down
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
122
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
A year ago
SIZE
8 KB
Renders a HTML Button element and a dropdown list into a parent container;
Button
Form Elements
React
UI Components
AO
1 contributor
Like
Log in to like
Install action-button as a package?
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
React
Vue
Angular
React Native
Add dependency... help_outline
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';
toggle layout
const style = {
	margin: '20px',
	display: 'flex',
	justifyContent: 'center',
	alignItems: 'center',
	width: 200
};
	<section>
		<div style={style}>
			<RoundAddButton />
		</div>
		<div style={style}>
			<DownloadButton />
		</div>
		<div style={style}>
modifieddraft
const style = {
	margin: '20px',
	display: 'flex',
	justifyContent: 'center',
	alignItems: 'center',
	width: 200
};
	<section>
		<div style={style}>
			<RoundAddButton />
		</div>
		<div style={style}>
			<DownloadButton />
		</div>
		<div style={style}>
modifieddraft
chevron_left
chevron_right
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.