Skip to main content

Button

Implementation#

import { Button } from "slipstream-ui";
const Example = () => <Button>...</Button>;

Default#

Example
<Button>...</Button>

Colors#

Example
<Button color="primary">...</Button>
<Button color="success">...</Button>
<Button color="warning">...</Button>
<Button color="danger">...</Button>
<Button color="default">...</Button>
<Button color="link">...</Button>

Sizing#

Example
<Button size="sm">...</Button>
<Button size="md">...</Button>
<Button size="lg">...</Button>

Disabled#

Example
<Button disabled>...</Button>

Tag (HTML Element)#

Example
Div Element
<Button tag="button">...</Button>
<Button tag="a" href="/">...</Button>
<Button tag="div">...</Button>

Block#

Example
<Button block>...</Button>

Props#

AttributeTypeValueDefault ValueDescription
colorstringdanger/default/link/primary/success/warning/disabledprimaryColor of button element
disabledbooleantrue/falseundefinedMark button and events as disabled
sizestringsm/md/lgmdSet size of button
blockbooleantrue/falseundefinedSet button to be full width of containing element
tagstringe.g. a/button/divundefinedChange button element tag to be a different element while keeping the same styles of the button