@elemental-ui-alpha/button
v0.0.2
Published
Buttons are used to trigger actions based on a user's interaction.
Downloads
4
Readme
Button
import { Button } from '@elemental-ui-alpha/button';
Appearances
The Button component has a appearance
property with three available values:
strong
(default)weak
minimal
<Cluster gap="small">
<Button appearance="strong">Strong</Button>
<Button appearance="weak">Weak</Button>
<Button appearance="minimal">Minimal</Button>
</Cluster>
Tone
The Button component has a tone
property with three available values:
neutral
action
(default)positive
critical
<Stack gap="small">
<Cluster gap="small">
<Button appearance="strong" tone="neutral">
Neutral
</Button>
<Button appearance="strong" tone="action">
Action
</Button>
<Button appearance="strong" tone="positive">
Positive
</Button>
<Button appearance="strong" tone="critical">
Critical
</Button>
</Cluster>
<Cluster gap="small">
<Button appearance="weak" tone="neutral">
Neutral
</Button>
<Button appearance="weak" tone="action">
Action
</Button>
<Button appearance="weak" tone="positive">
Positive
</Button>
<Button appearance="weak" tone="critical">
Critical
</Button>
</Cluster>
<Cluster gap="small">
<Button appearance="minimal" tone="neutral">
Neutral
</Button>
<Button appearance="minimal" tone="action">
Action
</Button>
<Button appearance="minimal" tone="positive">
Positive
</Button>
<Button appearance="minimal" tone="critical">
Critical
</Button>
</Cluster>
</Stack>
Miscellaneous
Disabled
When disabled the button will not by interactive to the user.
<Cluster gap="small">
<Button disabled>Strong</Button>
<Button disabled appearance="weak">
Weak
</Button>
<Button disabled appearance="minimal">
Minimal
</Button>
</Cluster>
Pending
Note that buttons will be disabled whilst pending.
let [pending, setPending] = React.useState(true);
return (
<Stack gap="large">
<Checkbox onChange={e => setPending(e.target.checked)} checked={pending}>
Toggle pending
</Checkbox>
<Cluster gap="small">
<Button pending={pending}>Strong: pending</Button>
<Button pending={pending} appearance="weak">
Weak: pending
</Button>
<Button pending={pending} appearance="minimal">
Minimal: pending
</Button>
</Cluster>
</Stack>
);