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

@ag.ds-next/button

Package Overview
Dependencies
Maintainers
2
Versions
18
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ag.ds-next/button

--- title: Button description: Buttons make common actions more obvious and help users more easily perform them. Buttons use labels and sometimes icons to communicate the action that will occur when the user touches them. group: Forms ---

  • 3.0.0
  • npm
  • Socket score

Version published
Weekly downloads
3
decreased by-90.62%
Maintainers
2
Weekly downloads
 
Created
Source

title: Button description: Buttons make common actions more obvious and help users more easily perform them. Buttons use labels and sometimes icons to communicate the action that will occur when the user touches them. group: Forms

Props

Variant

Our Button component has three visual weights, to convey heirarchy.

Primary

A strong button style used for primary actions on a screen such as a Submit button on a form, or other actions that are critical in a user workflow. A primary button should be only used once per view.

Secondary

A standard button style used to highlight an important action such as a Save button on a form. (A secondary button assumes there is already a primary button.)

Tertiary

A light button style used for tertiary actions on a screen such as a Cancel button on a form. (A tertiary button assumes there is already a secondary button.) Typically it performs the opposite action to the secondary button (e.g. Cancel vs Save).

<Flex gap={0.5}>
	<Button variant="primary" onClick={() => alert('primary')}>
		Primary
	</Button>
	<Button variant="secondary" onClick={() => alert('secondary')}>
		Secondary
	</Button>
	<Button variant="tertiary" onClick={() => alert('tertiary')}>
		Tertiary
	</Button>
</Flex>

Size

Size is another prop that allows adjustment of visual weight. The medium button should be used for most circumstances.

<Flex gap={0.25}>
	<Button variant="primary" size="sm" onClick={() => alert('primary')}>
		Primary
	</Button>
	<Button variant="secondary" size="sm" onClick={() => alert('secondary')}>
		Secondary
	</Button>
	<Button variant="tertiary" size="sm" onClick={() => alert('tertiary')}>
		Tertiary
	</Button>
</Flex>

Disabled

A button that can’t be clicked and doesn’t react to hover. A disabled button is typically greyed out to indicate to users that they cannot undertake the action associated with it. This is usually for page logic reasons.

<Flex gap={1}>
	<Button disabled variant="primary" onClick={() => alert('primary')}>
		Primary
	</Button>
	<Button disabled variant="secondary" onClick={() => alert('secondary')}>
		Secondary
	</Button>
	<Button disabled variant="tertiary" onClick={() => alert('tertiary')}>
		Tertiary
	</Button>
</Flex>

Block

A block-level button uses 100% of the available width of the container or parent element. A block- level button is used for visual prominence.

<Button block>Submit</Button>

For situations where you need something that has the visual weight of a Button, but the functionality of a link, you can use ButtonLink!

ButtonLink adopts the Link component from your chosen router framework, which you can set in the Core component.

<ButtonLink href="/sign-in">Sign in</ButtonLink>

FAQs

Package last updated on 08 Feb 2022

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