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

@twilio-paste/button

Package Overview
Dependencies
Maintainers
4
Versions
194
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@twilio-paste/button

A Button is a clickable element which communicates that users can trigger an action.

  • 14.1.2
  • latest
  • npm
  • Socket score

Version published
Maintainers
4
Created
Source

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 12 Jul 2024

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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc