Buttons provide a way for the user to take some action. When presented with more than one action, buttons are classified by their type to indicate the priority of each action. For example, primary type buttons represent the most important action within a set of buttons.
| Button Type | Purpose / Use Case |
|---|---|
| Primary | Primary action within a set of actions. |
| Standard | A general purpose button with no special emphasis |
The ContainedButton variant is used for high-emphasis buttons.
<SpacedGroup>
<Button onClick={() => console.log('Clicked')}>Standard
<Button type="primary">Primary</Button>
<Button type="secondary">Secondary</Button>
<Button>
<AssetIcon /> Button with Icon
</Button>
<Button type="primary">
<AssetIcon /> Button with Icon
</Button>
<Button disabled>Disabled</Button>
</SpacedGroup>
</Playground>TextButton variants are typically used for less-pronounced actions, including those located:
In cards, text buttons help maintain an emphasis on card content.
<SpacedGroup>
<Button variant="text">Standard
<Button variant="text" type="primary">
Primary
</Button>
<Button variant="text" type="secondary">
Secondary
</Button>
<Button variant="text">
<AssetIcon /> Button with Icon
</Button>
<Button variant="text" type="primary">
<AssetIcon /> Button with Icon
</Button>
<Button variant="text" disabled>
Disabled
</Button>
</SpacedGroup>
</Playground><Button data-trackingid="login">login</Button>
<Button data-trackingid="login">login
</Playground>