Set sizes using variant
prop.
<div>
<span style={{ margin: '5px' }}>
<Button variant="primary">Primary</Button>
</span>
<span style={{ margin: '5px' }}>
<Button variant="secondary">Secondary</Button>
</span>
<span style={{ margin: '5px' }}>
<Button variant="success">Success</Button>
</span>
<span style={{ margin: '5px' }}>
<Button variant="danger">Danger</Button>
</span>
<span style={{ margin: '5px' }}>
<Button variant="warning">Warning</Button>
</span>
<span style={{ margin: '5px' }}>
<Button variant="info">Info</Button>
</span>
<span style={{ margin: '5px' }}>
<Button variant="light">Light</Button>
</span>
<span style={{ margin: '5px' }}>
<Button variant="dark">Dark</Button>
</span>
</div>
Set sizes using size
prop like "sm"
or "lg"
.
<div>
<div style={{ margin: '5px' }}>
<Button size="sm">Small</Button>
</div>
<div style={{ margin: '5px' }}>
<Button>Medium</Button>
</div>
<div style={{ margin: '5px' }}>
<Button size="lg">Large</Button>
</div>
</div>
Disable using disabled
prop.
<Button disabled>Disabled</Button>