Demo
Color
1
2
3<Button>
Confirm
</Button>import { Button, IconButton } from "@dapper-ui/core";1
2
3<Button>
Confirm
</Button>gradient variant can be used to display gradients by passing a
gradient prop. This prop can either be a raw CSS gradient string or an object
with from and to fields. These fields can take a color name, in
which case the 600 shade will be used, or an array tuple with a color name and shade. It's
recommended setting the color prop as well, as it will be used for the outline color
when the button is selected.
1
2
3
4
5
6
7
8
9<Button variant="gradient" gradient="radial-gradient(#f71600, #ffc135)" color="orange">
Gradient
</Button>
<Button variant="gradient" gradient={{ from: "cyan", to: "violet" }} color="blue">
Object Gradient
</Button>
<Button variant="gradient" gradient={{ from: ["cyan", 100], to: ["violet", 900] }} color="blue">
Object Gradient With Shades
</Button>href prop. This allows
you to retain the design of a button while using the a tag for the underlying HTML
element. This ensures that your link is accessible and offers a better user experience with features
like the ability to middle click to open in a new tab. Using the Button component in this way allows
you to have the best of both worlds: a visually appealing button design and the functionality of
a link.
1
2
3<Button href="https://google.com" target="_blank">
I am a link in disguise!
</Button>1
2
3<IconButton label="Example">
<ClipboardCheck/>
</IconButton>string | undefinedundefinedThe id of the element.
'solid' | 'outline' | 'outline-dashed' | 'light' | 'subtle' | 'gradient''solid'The appearance of the button.
solid - A button with a background color.
outline - A button with a border and no background color.
outline-dashed - A button with a dashed border and no background color.
light - A button with a light background color.
subtle - A button without a background color.
gradient - A button with a gradient background color. The gradient can be customized with
the gradient prop.
Defaults to solid.
{ from: string | [string, Shades]; to: string | [string, Shades] } | string | undefined{ from: 'primary', to: 'primary' }Defines the gradient background of the button when the variant is set to gradient.
Can either be a raw CSS gradient string or an object with from and to fields. These fields
can take a color name, in which case the 600 shade will be used, or an array tuple with a
color name and shade. It's recommended setting the color prop as well, as it will be used for
the outline color when the button is selected.
Only works when the variant is set to gradient.
Example:
<Button variant="gradient" gradient="radial-gradient(#f71600, #ffc135)" color="orange">
Gradient
</Button>
<Button variant="gradient" gradient={{ from: "cyan", to: "violet" }} color="blue">
Object Gradient
</Button>
<Button variant="gradient" gradient={{ from: ["cyan", 100], to: ["violet", 900] }} color="blue">
Object Gradient With Shades
</Button>booleanfalseWhether the button should fill the width of its parent.
booleanfalseChanges the style of the button to look disabled and prevent the user from clicking it.
string | undefinedundefinedThe name of a color in the theme. Does not support arbitrary colors.
When set to undefined, the primary color of the theme will be used.
'xs' | 'sm' | 'base''base'The size of the button.
Radius | undefinedundefinedThe border radius of the button. When set to undefined, the button will have the default
border radius defined in the theme.
booleanfalseWhen set to true, the text of the button will not be truncated when the button is too small
to fit its content. Therefore the button might overflow its parent.
string | undefinedundefinedWhen set, the button will be rendered as a link with the given href.
string | undefinedundefinedThe target of the link. Only works when the href prop is set.
booleanfalseWhen set to true, automatically focuses the element when the component is mounted.
This is useful for usability and accessibility reasons, for example to focus an element when a modal is opened.
'start' | 'center' | 'end''center'Where the button content should be placed when the button is wider than its content.
string | undefinedundefinedCustom CSS styles to apply.
Especially useful for positioning styles like margings.