Security News
The Dark Side of Open Source
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
@kaizen/draft-button
Advanced tools
Readme
title: Button navTitle: Button summaryParagraph: Buttons perform actions. tags: ["Link button", "Primary action", "Secondary action", "Default action", "Destructive action", "Directional link", "Pagination link"] githubLabels: ["component:button"] needToKnow:
import WhenToUseAndWhenNotToUse from "docs-components/WhenToUseAndWhenNotToUse" import WhenToUse from "docs-components/WhenToUse" import WhenNotToUse from "docs-components/WhenNotToUse"
import DoAndDontContainer from "docs-components/DoAndDontContainer" import Do from "docs-components/Do" import Dont from "docs-components/Dont"
role=”button”
)All buttons across the platform should be clear, actionable and predictable. When a user clicks on a button, they should know what to expect. Therefore, it’s important to pay close attention to the labelling. Here are the most important rules to keep in mind:
Make sure that all your buttons begin with a strong verb (something that elicits an action from the user). Verbs indicate to a user what they’re about to see or do next. There are two ways to use verbs in a button:
Verb + noun
A verb and noun combination gives users more context and can help guide them when the action they’re about to perform isn’t commonplace.
Verb only
A verb only label should be used in cases where the action the user is about to perform is common and the meaning is clear. In these cases, the context in which the button appears is enough to know what the verb is referring to without needing a noun. This is a good option for when space is tight.
Here are some commonly used verb-only buttons in the platform:
All buttons should be in sentence case i.e. the first letter of the first word is capitalized and everything else is in lower case unless it’s a proper noun or feature name. Always err on the side of minimal punctuation, so leave out full stops and commas where possible.
The optimum number of words for a button is between 2 and 3 words. Buttons should be in active voice, succinct and scannable. So, avoid words like “a” and “an” and use an ampersand if you’re short for space.
Make sure that your verbs describe the action accurately. Use words like “Cancel” and “Save.” Avoid phrases like, “Click here.” Not only is that redundant, it also doesn’t describe what the user will see next nor does it comply with our accessibility rules.
Avoid using “yes” or “no” as buttons. This requires the user to read the body text to know what they’re agreeing or disagreeing to.
Any buttons that include a personal pronoun should be written in the second person.
Keep in mind that you shouldn’t use personal pronouns unless you’re asking the user to filter something. For example, “View your reports” vs “View all reports.”
Make sure that the button uses the same verb and noun as what’s used in the body text above it. For example, if you say “Upload your most up-to-date employee data into Culture Amp.” in the body, the button should say “Upload data,” not “Import data.” There are also cases in which the action the user wants to perform is a common label button like “Next” or “Cancel.” Make sure that you’ve rewritten your body copy to make the action very clear. For example, if a user is trying to cancel sending a survey, but there’s also a cancel button to exit the modal they’re viewing, reword the copy of the body to say “don’t send survey.”
Here are some examples of other existing design systems:
FAQs
The draft Button component
The npm package @kaizen/draft-button receives a total of 3,472 weekly downloads. As such, @kaizen/draft-button popularity was classified as popular.
We found that @kaizen/draft-button demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 10 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
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.