Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@paprika/button
Advanced tools
Readme
Button component, for performing an action on the page you’re viewing.
yarn add @paprika/button
or with npm:
npm install @paprika/button
Prop | Type | required | default | Description |
---|---|---|---|---|
a11yText | string | false | null | Descriptive a11y text for assistive technologies. By default, text from children node will be used. |
canPropagate | bool | false | true | If click events are allowed to propagate up the DOM tree. |
children | node | false | null | Body content of the button. |
icon | node | false | null | An icon to be included to the left of children content. |
isActive | bool | false | null | If the button is in an "active" or "selected" state. |
isDisabled | bool | false | false | If the button is disabled. |
isDropdown | bool | false | false | If the button includes a down arrow to the right of children content. |
isFullWidth | bool | false | false | If the width of the button should span it's parent container (100%). |
isPending | bool | false | false | If the button should render in a pending state (with a spinner icon). |
isSemantic | bool | false | true | If it will be rendered as a element. If false, a will be rendered via an accessible . |
isSubmit | bool | false | false | If the type attribute should "submit", instead of the default "button". |
kind | [ Button.types.kind.DEFAULT, Button.types.kind.PRIMARY, Button.types.kind.SECONDARY, Button.types.kind.DESTRUCTIVE, Button.types.kind.FLAT, Button.types.kind.MINOR, Button.types.kind.LINK] | false | Button.types.kind.DEFAULT | The visual style of the button. |
onClick | func | false | () => {} | Callback to be executed when the button is clicked or activated by keyboard. Typically required. |
role | string | false | "button" | Value for role attribute to override the default of "button". |
size | [ Button.types.size.SMALL, Button.types.size.MEDIUM, Button.types.size.LARGE] | false | Button.types.size.MEDIUM | Size of the button (font size, min-height, padding, etc). |
tabIndex | number | false | null | Value for tabindex attribute to override the default of 0. |
Prop | Type | required | default | Description |
---|---|---|---|---|
a11yText | string | false | null | Descriptive a11y text for assistive technologies. By default, text from children node will be used. |
isDark | bool | false | false | If the close button will be rendered on a dark background and will use inverted colours. |
Prop | Type | required | default | Description |
---|---|---|---|---|
children | node | true | - | Body content of the button (an icon). |
kind | [ Icon.types.kind.DEFAULT, Icon.types.kind.PRIMARY, Icon.types.kind.SECONDARY, Icon.types.kind.DESTRUCTIVE, Icon.types.kind.FLAT, Icon.types.kind.MINOR, Icon.types.kind.LINK] | false | Icon.types.kind.DEFAULT | The visual style of the button. |
size | [ Icon.types.size.SMALL, Icon.types.size.MEDIUM, Icon.types.size.LARGE] | false | Icon.types.size.MEDIUM | Size of the button (font size, min-height, padding, etc). |
Prop | Type | required | default | Description |
---|---|---|---|---|
a11yText | string | false | null | Descriptive a11y text for assistive technologies. By default, text from children node will be used. |
children | node | true | - | Body content of the button. |
href | string | true | - | Url for the link. |
icon | node | false | null | An icon to be included to the left of children content. |
isDisabled | bool | false | false | If the button is disabled. |
kind | [ Link.types.kind.DEFAULT, Link.types.kind.PRIMARY, Link.types.kind.SECONDARY, Link.types.kind.DESTRUCTIVE, Link.types.kind.FLAT, Link.types.kind.MINOR, Link.types.kind.LINK] | false | Link.types.kind.LINK | The visual style of the button. |
size | [ Link.types.size.SMALL, Link.types.size.MEDIUM, Link.types.size.LARGE] | false | Link.types.size.MEDIUM | Size of the button (font size, min-height, padding, etc). |
shouldOpenNewTab | bool | false | false | Whether the link should open a new tab. |
suffixIcon | node | false | Size of the button (font size, min-height, padding, etc). |
The <Button>
component is a fully accessible button intended for use typically as a skeuomorphic button, but many visual styles (kinds) are available.
For buttons with a label that is only an icon, the <Button.Icon>
component is provided. For typical close buttons, <Button.Close>
is provided.
It is rendered as a <button>
element by default, but can also be rendered as a generic <span>
, via the <RawButton>
if global CSS conflicts are an issue (when isSemantic
prop is set to false
).
For a basic button
import Button from "@paprika/button";
<Button onClick={clickHandler}>Button label</Button>;
Or an Icon button
import Button from "@paprika/button";
import InfoIcon from "@paprika/icon/lib/InfoCircle";
<Button.Icon onClick={clickHandler}>
<InfoIcon />
</Button.Icon>;
Or a Close button
import Button from "@paprika/button";
<Button.Close onClick={clickHandler} />;
FAQs
Button component, for performing an action on the page you’re viewing.
The npm package @paprika/button receives a total of 8,159 weekly downloads. As such, @paprika/button popularity was classified as popular.
We found that @paprika/button demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.