React
Is new design vision part implemented using new tokens?
Up to date
Resources
Example
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 |