Button

Buttons are interactive elements that trigger actions, allowing users to complete tasks efficiently.

React

Is new design vision part implemented using new tokens?

Up to date

Resources

Storybook

React guidance

Source

GitHub code

Example

Open in Storybook


                                                        
                                                        
                                                            import { Button } from '@optimus-web/core';
                                                        import { IconName } from '@optimus-web/icons'
                                                        
                                                        <Button variant="primary" icon={IconName.Add}>
                                                            Create
                                                        </Button>

API

Name	Description	Type	Default
asTag?	Renders button as a specific HTML element	string	"button"
counter?	Add a counter number inside the button	number
data-test-id?	Gives the button a specific data test id	string
disabled?	Allows the button to be disabled	boolean
forwardedRef?	Adds your React.Ref to the button	React.Ref<HTMLButtonElement>
formatCounter?	Function that formats the counter prop (e.g. no number over 99)	(counter: number) => string
icon?	Use IconName from @optimus-web/icons to add an icon inside the button	IconName
iconPosition?	Position of an added icon	string	"left"
iconSize?	"small", "medium"	string	"small"
onClick?	Your unique onClick handler function	React.MouseEventHandler<HTMLButtonElement>
size?	"small", "medium", "large", "extraLarge"	Size	"medium"
variant?	"destructive", "ghost", "primary", "secondary", "tertiary"	ButtonVariant	"tertiary"
wide?	Gives the button a width of 100%	boolean	false