Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free
bit
Resources arrow_drop_down
Features
Pricing
GitHub
Bit for teams
Bit for libraries
Explore
Blog
Support
About Us
Resources arrow_drop_down
Bit for teams
Bit for libraries
Explore
Blog
Support
About Us
Docs
Features
Pricing
GitHub
Login
le
lekanmedia / shared-ui/

primary-button

v1.0.7arrow_drop_down
v1.0.7
v1.0.6
v1.0.5
v1.0.4
v1.0.3
v1.0.2
v1.0.1
v1.0.0
STATUS
Passing
DOWNLOADS
199
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
3 months ago
SIZE
7 KB
subject
Renders a HTML Button element
Button
Form Elements
React
UI Components
Utils
AO
1 contributor
Like
Log in to like
Use primary-button in your project ?
Copied
npm i @bit/lekanmedia.shared-ui.primary-button
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
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';
revert changes
reload
toggle layout
maximize
modifieddraft
modifieddraft
chevron_left
chevron_right
PrimaryButton (
props.className:string,
props.addClass:string,
props.width:number,
props.height:number,
props.text:string,
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.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.children: JSX.Element

React Elements

props.onClick: function

onclick event function of the button.

Returns
JSX.Element

A HTML `button`

IconButton (
props.className:string,
props.addClass:string,
props.width:number,
props.height:number,
props.icon:string,
props.iconStyle:object,
props.children:JSX.Element,
props.onClick:function
) : JSX.Element

Inserts an Icon from the Material Icon library into a 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.icon: string

Google Material Icon for 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 `PrimaryButton` component with an icon as a child.

RoundIconButton (
props.className:string,
props.addClass:string,
props.width:number,
props.height:number,
props.icon:string,
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.icon: string

Google Material Icon for 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 round `IconButton` component.

RoundSpinnerButton (
props.className:string,
props.addClass:string,
props.width:number,
props.height:number,
props.spinnerSize:number,
props.spinnerColor:string,
props.spinnerColors:[string],
props.spinnerDuration:string,
props.spinnerDepth:number,
props.onClick:function
) : JSX.Element

Renders a Spinner component into an 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.spinnerSize: number

The size of the width and height of the Spinner.

props.spinnerColor: string

A single color for the Spinner.

props.spinnerColors: [string]

An array of color hex strings for the Spinner. It overides spinnerColor.

props.spinnerDuration: string

The duration of a complete revolution of the Spinner in seconds.

props.spinnerDepth: number

The thickness of the Spinner border.

props.onClick: function

onclick event function of the button.

Returns
JSX.Element

A round `IconButton` with a child `Spinner` component.

TextIconButton (
props.className:string,
props.addClass:string,
props.width:number,
props.height:number,
props.text:string,
props.textStyle:object,
props.icon:string,
props.iconStyle:object,
props.onClick:function,
props.onClickIcon: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.icon: string

Google Material Icon for the button.

props.iconStyle: object

Style Inline CSS styles for icon.

props.onClick: function

onclick event function of the button.

props.onClickIcon: function

onclick event function of the icon in the button.

Returns
JSX.Element

A `PrimaryButton` component with an icon and a text node as its children.

LoadingTextButton (
props.className:string,
props.addClass:string,
props.width:number,
props.height:number,
props.text:string,
props.textStyle:object,
props.spinnerSize:number,
props.spinnerColor:string,
props.spinnerColors:[string],
props.spinnerDuration:string,
props.spinnerDepth:number,
props.onClick:function
) : JSX.Element

Renders a Spinner component and a text node into a 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.spinnerSize: number

The size of the width and height of the Spinner.

props.spinnerColor: string

A single color for the Spinner.

props.spinnerColors: [string]

An array of color hex strings for the Spinner. It overides spinnerColor.

props.spinnerDuration: string

The duration of a complete revolution of the Spinner in seconds.

props.spinnerDepth: number

The thickness of the Spinner border.

props.onClick: function

onclick event function of the button.

Returns
JSX.Element

A `PrimaryButton` component with a `Spinner` component and text node as its children.

SuccessButton (
props.className:string,
props.addClass:string,
props.width:number,
props.height:number,
props.text:string,
props.textStyle:object,
props.icon:string,
props.iconStyle:object,
props.onClick:function
) : JSX.Element

Renders a check icon and a success text into a TextIconButton.

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.icon: string

Google Material Icon for the button.

props.iconStyle: object

Style Inline CSS styles for icon.

props.onClick: function

onclick event function of the button.

Returns
JSX.Element

A `TextIconButton` component with a _check_ icon and _Success_ text as its children.

DangerButton (
props.className:string,
props.addClass:string,
props.width:number,
props.height:number,
props.text:string,
props.textStyle:object,
props.icon:string,
props.iconStyle:object,
props.onClick:function
) : JSX.Element

Renders a close icon and a Danger text into a TextIconButton.

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.icon: string

Google Material Icon for the button.

props.iconStyle: object

Style Inline CSS styles for icon.

props.onClick: function

onclick event function of the button.

Returns
JSX.Element

A `TextIconButton` component with a _close_ icon and _Danger_ text as its children.