包详细信息

@hakuna-matata-ui/button

monacohq6MIT1.5.3

A React component that is a base button.

button, button-group, react, hakuna-matata-ui

自述文件

Button

Buttons are used as triggers for actions. They are used in forms, toolbars, dialog footers and as stand-alone action triggers.

Installation

yarn add @hakuna-matata-ui/button

# or

npm i @hakuna-matata-ui/button

Import component

import { Button } from "@hakuna-matata-ui/button"

Usage

<Button colorScheme="green">Button</Button>

Button Sizes

Use the size prop to change the size of the button. You can set the value to xs, sm, md, or lg.

<Stack>
  <Button size="xs">Button</Button>
  <Button size="sm">Button</Button>
  <Button size="md">Button</Button>
  <Button size="lg">Button</Button>
</Stack>

Button Variant

Use the variant prop to change the visual style of the Button. You can set the value to solid, ghost, outline, or link.

<ButtonGroup>
  <Button variant="solid">Button</Button>
  <Button variant="outline">Button</Button>
  <Button variant="ghost">Button</Button>
  <Button variant="link">Button</Button>
</ButtonGroup>

Button with Icon

You can add left and right icons to the Button components.

<ButtonGroup>
  <Button leftIcon={<EmailIcon />} variant="solid">
    Email
  </Button>
  <Button rightIcon={<ArrowForwardIcon />} variant="outline">
    Call us
  </Button>
</ButtonGroup>

Button loading state

Pass isLoading prop to the Button component to show its loading state. You can optionally pass loadingText prop.

You can also use a custom spinner to render your own spinner component.

<Stack>
  <Button isLoading colorScheme="teal" variant="solid">
    Email
  </Button>

  <Button
    isLoading
    colorScheme="teal"
    variant="outline"
    spinner={<BarSpinner />}
  >
    Submit
  </Button>
</Stack>

更新日志

Change Log

1.5.3

Patch Changes

  • update button

1.5.2

Patch Changes

  • 6145ef788 Thanks @LoganAtCrypto! - new release

  • Updated dependencies [6145ef788]:

    • @hakuna-matata-ui/hooks@1.7.2
    • @hakuna-matata-ui/react-utils@1.2.2
    • @hakuna-matata-ui/spinner@1.2.2
    • @hakuna-matata-ui/utils@1.9.2

1.5.1

Patch Changes

  • #5075 b28142946 Thanks @cschroeter! - Update babel config to transpile soruces for older browsers. This fixes issues with CRA and Storybook.
  • Updated dependencies [b28142946]:
    • @hakuna-matata-ui/hooks@1.7.1
    • @hakuna-matata-ui/react-utils@1.2.1
    • @hakuna-matata-ui/spinner@1.2.1
    • @hakuna-matata-ui/utils@1.9.1

1.5.0

Minor Changes

  • #4991 6095eaf9a Thanks @segunadebayo! - Update build system we use from a custom babel cli setup to preconstruct.

    The previous build system transpiles the code in src directory to dist/esm and dist/cjs keeping the same file structure. The new build system merges all files in src and transpiles to a single esm and cjs file.

    Potential Breaking Change: The side effect of this is that, if you imported any function, component or hook using the undocumented approach like import { useOutsideClick } from "@hakuna-matata-ui/hooks/dist/use-outside-click", you'll notice that the this doesn't work anymore.

    Here's how to resolve it:

    ```jsx live=false // Won't work 🎇 import { useOutsideClick } from "@hakuna-matata-ui/hooks/dist/use-outside-click"

    // Works ✅ import { useOutsideClick } from "@hakuna-matata-ui/hooks" ```

    If this affected your project, we recommend that you import hooks, functions or components the way it's shown in the documentation. This will help keep your project future-proof.

Patch Changes

  • Updated dependencies [6095eaf9a]:
    • @hakuna-matata-ui/hooks@1.7.0
    • @hakuna-matata-ui/react-utils@1.2.0
    • @hakuna-matata-ui/spinner@1.2.0
    • @hakuna-matata-ui/utils@1.9.0

1.4.6

Patch Changes

  • Updated dependencies [5fe9b552b, cd0893c56]:
    • @hakuna-matata-ui/hooks@1.6.2
    • @hakuna-matata-ui/utils@1.8.4
    • @hakuna-matata-ui/spinner@1.1.14

1.4.5

Patch Changes

  • Updated dependencies [c06d242c6, a9d1dc4ac, 5b4d8ef24]:
    • @hakuna-matata-ui/utils@1.8.3
    • @hakuna-matata-ui/hooks@1.6.1
    • @hakuna-matata-ui/spinner@1.1.13

1.4.4

Patch Changes

1.4.3

Patch Changes

  • 87ffdd1cb Thanks @segunadebayo! - Fix issue where composing Button with framer-motion's motion factory breaks animation/transition

1.4.2

Patch Changes

  • bafcc39aa #4353 Thanks @dsumer! - Resolved an issue where a Button in loading state didn't consider the width of leftIcon and rightIcon, resulting in layout shifts when the button leaves the loading state. Buttons now render with the same width regardless of state.
  • Updated dependencies [4c1071969, 43f66097b]:
    • @hakuna-matata-ui/utils@1.8.2
    • @hakuna-matata-ui/spinner@1.1.12

1.4.1

Patch Changes

  • Updated dependencies [4a1e4d93b]:
    • @hakuna-matata-ui/utils@1.8.1
    • @hakuna-matata-ui/spinner@1.1.11

1.4.0

Minor Changes

Patch Changes

1.3.2

Patch Changes

1.3.1

Patch Changes

  • ad8a7b9f1 #3875 Thanks @antoniel! - Resolved an issue where the type prop of the Button component was set to undefined.
  • Updated dependencies [82f08867f, e9ac4cc76]:
    • @hakuna-matata-ui/react-utils@1.1.2
    • @hakuna-matata-ui/utils@1.7.0
    • @hakuna-matata-ui/spinner@1.1.8

1.3.0

Minor Changes

  • aec2aaf9d #3732 Thanks @jatin33! - Added spinnerPlacement prop to allow changing the spinner placement for the button when isLoading is true. Spinner placement can be either start or end

    jsx live=false <Button isLoading spinnerPlacement="end"> Click me </Button>

Patch Changes

  • Updated dependencies [0974e547c, 59ea894a7]:
    • @hakuna-matata-ui/utils@1.6.0
    • @hakuna-matata-ui/spinner@1.1.7

1.2.2

Patch Changes

1.2.1

Patch Changes

  • Updated dependencies [87a03b320, 1a04a41bd, e481ba491]:
    • @hakuna-matata-ui/react-utils@1.1.1
    • @hakuna-matata-ui/utils@1.5.1
    • @hakuna-matata-ui/spinner@1.1.5

1.2.0

Minor Changes

Patch Changes

  • Updated dependencies [a58b724e9, b724a9dd9]:
    • @hakuna-matata-ui/utils@1.5.0
    • @hakuna-matata-ui/react-utils@1.1.0
    • @hakuna-matata-ui/spinner@1.1.4

1.1.4

Patch Changes

  • Updated dependencies [e748219f3, 91ef14839]:
    • @hakuna-matata-ui/utils@1.4.0
    • @hakuna-matata-ui/spinner@1.1.3

1.1.3

Patch Changes

  • Updated dependencies [87cc23e14]:
    • @hakuna-matata-ui/utils@1.3.0
    • @hakuna-matata-ui/spinner@1.1.2

1.1.2

Patch Changes

  • 01231ed49 #3298 Thanks @segunadebayo! - Provide better typings for size and variant for AvatarGroup, CheckboxGroup, ButtonGroup, and RadioGroup.

1.1.1

Patch Changes

1.1.0

Minor Changes

  • 90c7a4fbf #3092 Thanks @TimKolberger! - - Improved theme typing in order to provide a better autocomplete experience
    • Fixed a type issue where pseudo style props like _hover and _active didn't allow regular css properties

Patch Changes

  • Updated dependencies [90c7a4fbf]:
    • @hakuna-matata-ui/spinner@1.1.0

1.0.4

Patch Changes

  • Updated dependencies [8b87406c]:
    • @hakuna-matata-ui/utils@1.1.0
    • @hakuna-matata-ui/spinner@1.0.3

1.0.3

Patch Changes

  • 5cef5de4 #2918 Thanks @MohamedSayed008! - ## Button

    • Update the style props applied for leftIcon and rightIcon to support RTL. Changed ml and mr to marginStart and marginEnd respectively.
    • Update the style props applied when isLoading is true. Changed marginRight to marginEnd.

    Stack

    • Update directionStyles to use logical CSS properties for RTL support. Changed marginLeft and marginRight to marginStart and marginEnd respectively.

    Styled System

    • Add missing borderStart, and borderEnd for style and color.
    • Sort Object.assign keys in configs/border.ts for better readability.

    Other RTL Fixes

    • Alignment for close icon for Tag, Modal, and Drawer components to support RTL.

    Storybook

    Add RTL storybook toolbar for make it easy to test layouts.

    Packages added:

    • @storybook/addon-toolbars

1.0.2

Patch Changes

  • Updated dependencies [e73878ee]:
    • @hakuna-matata-ui/utils@1.0.2
    • @hakuna-matata-ui/spinner@1.0.2

1.0.1

Patch Changes

  • Updated dependencies [5c482483]:
    • @hakuna-matata-ui/utils@1.0.1
    • @hakuna-matata-ui/spinner@1.0.1

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0 (2020-11-13)

Note: Version bump only for package @hakuna-matata-ui/button

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.8 (2020-10-29)

Bug Fixes

  • toast: allow custom render in update (eb8bff9), closes #2362

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.7 (2020-10-25)

Note: Version bump only for package @hakuna-matata-ui/button

1.0.0-rc.6 (2020-10-25)

Note: Version bump only for package @hakuna-matata-ui/button

1.0.0-rc.5 (2020-09-27)

Note: Version bump only for package @hakuna-matata-ui/button

1.0.0-rc.4 (2020-09-25)

Note: Version bump only for package @hakuna-matata-ui/button

1.0.0-rc.3 (2020-08-30)

Note: Version bump only for package @hakuna-matata-ui/button

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.2 (2020-08-09)

Note: Version bump only for package @hakuna-matata-ui/button

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.1 (2020-08-06)

Bug Fixes

  • button: issue where spinner is not centered on lg button (4245722)

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-rc.0 (2020-07-26)

Note: Version bump only for package @hakuna-matata-ui/button

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.7 (2020-07-26)

Note: Version bump only for package @hakuna-matata-ui/button

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.6 (2020-07-15)

Note: Version bump only for package @hakuna-matata-ui/button

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.5 (2020-07-15)

Note: Version bump only for package @hakuna-matata-ui/button

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.4 (2020-07-01)

Bug Fixes

  • button ignores type prop when as prop is used (ba60c8b)
  • button: remove negative margin on icons (4ed6c4b)
  • #891 (e107acc)
  • force uppercase package directories to lowercase (3704992)
  • ts issue with sx prop (d3b1340)

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.3 (2020-06-28)

Bug Fixes

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.0.0-next.2 (2020-06-21)

Bug Fixes