Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free
Developers
RESOURCES
Quick start
Tutorials
How Bit works
Workflows
Slack
Contact us
Blog
OPEN SOURCE
Bit
Components
Collections
Extensions
Platform
Features
Front-end teams
Component libraries
Design systems
Support
Pricing
Enterprise
Learn more
Developers
RESOURCES
OPEN SOURCE
Platform
Pricing
Enterprise
Login
AO
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
1,293
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
A year ago
SIZE
7 KB
Renders a HTML Button element
Button
Form Elements
React
UI Components
Utils
AO
1 contributor
Like
Log in to like
Install primary-button as a package?
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
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
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.