Have ideas to improve npm?Join in the discussion! »

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

    7.0.1 • Public • Published

    Button

    Installation

    yarn add @twilio-paste/button
    

    Usage

    import {Button} from '@twilio-paste/button';
    
    <Button variant="secondary" size="small" onClick={() => {}}>
      Submit
    </Button>;

    Props

    Prop Type Description Default
    type? string If the button is inside a <form>: use 'submit'. Otherwise use 'button' (default). 'button'
    as? string The HTML tag to replace the default <button> tag. 'button'
    href? string A 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'
    fullWidth boolean Sets the button width to 100% of the parent container. false
    disabled? boolean Prevent actions from firing on this button false
    loading? boolean Prevent actions and show a loading spinner false
    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? boolean A11y: For accordions null
    aria-haspopup? {'true', 'dialog', 'menu'} A11y: For modals and menus null
    aria-controls? string A11y: For modals and menus null
    data-test? string To 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.

    Keywords

    none

    Install

    npm i @twilio-paste/button

    DownloadsWeekly Downloads

    1,015

    Version

    7.0.1

    License

    MIT

    Unpacked Size

    434 kB

    Total Files

    32

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar