Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

@twilio-paste/button

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@twilio-paste/button

Twilio's Button component

  • 2.3.16
  • npm
  • Socket score

Version published
Maintainers
5
Created

Button

Installation

yarn add @twilio-paste/button

Usage

import {Button} from '@twilio-paste/button';

<Button variant="secondary" size="small" onClick={() => {}}>
  Submit
</Button>;

Props

PropTypeDescriptionDefault
type?stringIf the button is inside a <form>: use 'submit'. Otherwise use 'button' (default).'button'
as?stringThe HTML tag to replace the default <button> tag.'button'
href?stringA URL to route to. Must use as="a" for this prop to work.null
variant?ButtonVariants'primary', 'secondary', 'destructive', 'destructive_link', 'link', 'reset''primary'
size?ButtonSizes'default', 'small', 'icon', 'reset''default'
fullWidthbooleanSets the button width to 100% of the parent container.false
disabled?booleanPrevent actions from firing on this buttonfalse
loading?booleanPrevent actions and show a loading spinnerfalse
onClick?(event: React.MouseEvent)null
onMouseDown?(event: React.MouseEvent)null
onMouseUp?(event: React.MouseEvent)null
onMouseEnter?(event: React.MouseEvent)null
onMouseLeave?(event: React.MouseEvent)null
onFocus?(event: React.FocusEvent)null
onBlur?(event: React.FocusEvent)null
aria-expanded?booleanA11y: For accordionsnull
aria-haspopup?{'true', 'dialog', 'menu'}A11y: For modals and menusnull
aria-controls?stringA11y: For modals and menusnull
data-test?stringTo detect the element to run tests against.null

Changes from react-components-button

  • The btnStyle prop is renamed to variant. The new values are:
    • "primary" (blue, filled)
    • "secondary" (blue, outlined)
    • "destructive" (red, filled)
    • "destructive_link" (a red link)
    • "link" (a blue link)
    • "reset" (all default styles removed)
  • The btnSize prop is renamed to size. The new values are:
    • "default" (normal size, grows to content)
    • "small" (less padding than auto, grows to content)
    • "icon" (used for icon buttons only, balanced padding on all sides)
    • "reset" (no padding or any additional sizing is applied)
  • The ButtonPlus component has been deprecated.
  • Our new button component can be used as a link.

FAQs

Package last updated on 07 Oct 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts