Button
Buttons let users take action, such as submitting a form or confirming a choice
<Button emphasis="high">Button</Button>Emphasis
Emphasis controls how visually prominent a button appears. Use high emphasis for the main action in a given context. Use lower emphasis for secondary or less important actions. This helps create clear hierarchy and makes it easier to scan the interface.
<Button emphasis="high">Button</Button>
<Button emphasis="medium">Button</Button>
<Button emphasis="low">Button</Button>
<Button emphasis="none">Button</Button>Interaction states
Buttons respond to user interaction. They have styles for hover, focus, active, and disabled states. These states are designed to feel consistent across all emphasis levels while remaining clear and accessible.
Size
Use the size property to change a button’s dimensions. Size affects height, padding, and font size, but it does not change the button’s emphasis or behavior.
<Button emphasis="high" size="small">
Button
</Button>
<Button emphasis="high" size="medium">
Button
</Button>
<Button emphasis="high" size="large">
Button
</Button>Icons
Buttons can include an icon before or after the label to add context. They can also be icon-only by removing the label. When using an icon-only button, be sure to provide an accessible name, such as with an aria-label.
<Button icon={<PlusIcon />} emphasis="high">
Button
</Button>
<Button icon={<ArrowRightIcon />} iconPosition="end" emphasis="high">
Button
</Button>
<Button icon={<CheckIcon />} emphasis="high"></Button>