@lendi-ui/button
TypeScript icon, indicating that this package has built-in type declarations

8.4.3 • Public • Published

@lendi-ui/button

Including Button and ButtonGroup two component.

Installation

yarn add @lendi-ui/button

Usage

  • Button
import { Button } from '@lendi-ui/button';
<Button variant="primary">Continue</Button>;
  • Button
import { ButtonGroup } from '@lendi-ui/button';
<ButtonGroup size="sm">
  <ButtonGroup.Button variant="secondary">&lt;</ButtonGroup.Button>
  <ButtonGroup.Button variant="primary">Continue</ButtonGroup.Button>
</ButtonGroup>;

Properties

  • Button
<PropTable>
  <PropTable.Entry name="after" type="React.ReactNode" description="Content after the button label"/>
  <PropTable.Entry name="ariaLabel" type="string" description="Ensure you add a label for buttons that do not contain text. If not provided (and the children of button is text) this is automatically added"/>
  <PropTable.Entry name="before" type="React.ReactNode" description="Content before the button label"/>
  <PropTable.Entry name="children" type="React.ReactNode" description="The button content"/>
  <PropTable.Entry name="className"  defaultValue="" type="string" description="External classname to override style of the component"/>
  <PropTable.Entry name="href" type="string" description="URL to link to"/>
  <PropTable.Entry name="isDisabled" type="boolean" defaultValue={false} description="Whether the button responds to user input"/>
  <PropTable.Entry name="isFullWidth" type="boolean" defaultValue={false} description="Whether the button takes up the full width of the container"/>
  <PropTable.Entry name="isInverse" type="boolean" defaultValue={false} description="Whether the button is inversed"/>
  <PropTable.Entry name="onClick" type="() => void" description="Handle the click event"/>
  <PropTable.Entry name="size" type={`"xs" | "sm" | "md" | "lg"`} defaultValue="md" description="The button size"/>
  <PropTable.Entry name="variant" type={`"primary" | "secondary" | "emphasis" | "empty"`} description="The button type"/>
</PropTable>

ButtonGroup Properties

<PropTable>
  <PropTable.Entry name="children" type="React.ReactElement<ButtonGroupButtonProps>" description="The buttons"/>
  <PropTable.Entry name="className" defaultValue="" type="string" description="External classname to override style of the component"/>
  <PropTable.Entry name="isDisabled" type="boolean" defaultValue={false} description="Disabling the ButtonGroup"/>
  <PropTable.Entry name="isFullWidth" type="boolean" defaultValue={false} description="Buttons take up the max width of parent"/>
  <PropTable.Entry name="isInverse" type="boolean" defaultValue={false} description="Switches the foreground and background colours"/>
  <PropTable.Entry name="size" type={`"xs" | "sm" | "md" | "lg"`} defaultValue="md" description="The buttons size"/>
</PropTable>

ButtonGroup.Button Properties

<PropTable>
  <PropTable.Entry name="after" type="React.ReactNode" description="Content after the button label"/>
  <PropTable.Entry name="before" type="React.ReactNode" description="Content before the button label"/>
  <PropTable.Entry name="children" type="React.ReactNode" description="The button content"/>
  <PropTable.Entry name="href" type="string" description="URL to link to"/>
  <PropTable.Entry name="isDisabled" type="boolean" defaultValue={false} description="Whether the button responds to user input"/>
  <PropTable.Entry name="onClick" type="() => void" description="Handle the click event"/>
  <PropTable.Entry name="variant" type={`"primary" | "secondary" | "emphasis" | "empty"`} description="The button type"/>
</PropTable>

Readme

Keywords

none

Package Sidebar

Install

npm i @lendi-ui/button

Weekly Downloads

198

Version

8.4.3

License

ISC

Unpacked Size

77.4 kB

Total Files

14

Last publish

Collaborators

  • joshua-derbe-lendi
  • michaelhuttonlendi
  • simon_lau_lendi
  • benjamintan
  • oliverfrance
  • kjartan.johansen
  • dapovey
  • nooshines
  • fernandogontijo_
  • sean-elliott-lendi
  • nghiato
  • sunny.niu
  • mfarshadmehr
  • jannes.mingram.lendi
  • antoine_lendi
  • bchiong
  • lendi-owner
  • andrealin
  • malkyfaith
  • brianduan
  • yihan_lu_lendi
  • nodemacross
  • samnevers
  • boris.gordon
  • leo.wei
  • bharadwajsampath
  • luissilvalendi
  • thomaslendi
  • dimitrioslendi
  • le-kang-lendi
  • yupeili