component

Button

The button component is probably the most widely used element in any user interface or website as it can be used to launch an action but also to link to other pages.

Source code in GitHub Button in Storybook

Set Up #

To use the Button component, first import it in the script tag:

Example.svelte
<script>
	import { Button } from '@sans-ui/core';
</script>

Usage #

Buttons allow users to perform actions with a single click. You can also disable the ripple effect, which we will cover later on this rippled section .

Example.svelte
<script>
	import { Button } from '@sans-ui/core';
</script>

<Button>Button</Button>

Variant #

The variant prop lets you customize the color theme of the button:

Example.svelte
<script>
	import { Button } from '@sans-ui/core';
</script>

<Button variant="primary">Button</Button>
<Button variant="secondary">Button</Button>
<Button variant="success">Button</Button>
<Button variant="warning">Button</Button>
<Button variant="danger">Button</Button>

Size #

Use the size prop to control the button’s size:

Example.svelte
<script>
	import { Button } from '@sans-ui/core';
</script>

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

Kind #

The kind prop determines the button’s appearance:

Example.svelte
<script>
	import { Button } from '@sans-ui/core';
</script>

<Button kind="solid">Solid</Button>
<Button kind="bordered">Bordered</Button>
<Button kind="flat">Flat</Button>
<Button kind="shadow">Shadow</Button>

Rounded #

Adjust the button’s border-radius with the rounded prop:

Example.svelte
<script>
	import { Button } from '@sans-ui/core';
</script>

<Button rounded="none">rounded none</Button>
<Button rounded="sm">rounded sm</Button>
<Button rounded="md">rounded md</Button>
<Button rounded="lg">rounded lg</Button>
<Button rounded="full">rounded full</Button>

Disabled #

Disable the button using the disabled prop:

Example.svelte
<script>
	import { Button } from '@sans-ui/core';
</script>

<Button disabled>Button</Button>

Rippled #

To disable the ripple effect, use the rippled prop:

Example.svelte
<script>
	import { Button } from '@sans-ui/core';
</script>

<Button rippled={false}>Button</Button>

Animation #

Control the background color transition animation with the animation prop. Note that this does not affect the ripple effect, which must be controlled separately via the rippled property .

Example.svelte
<script>
	import { Button } from '@sans-ui/core';
</script>

<Button animation={false}>Button</Button>

Button as Link #

The href prop allows the button to function as a link, making it behave like an anchor element:

Link to External
Example.svelte
<script>
	import { Button } from '@sans-ui/core';
</script>

<Button href="https://github.com/sans-ui-org/sans-ui" rel="noopener noreferrer" target="_blank"
	>Link to External</Button
>

Icon Button #

To create an icon-only button, use the iconOnly prop:

Example.svelte
<script>
	import { Button } from '@sans-ui/core';
</script>

<Button iconOnly={true}>
	<!-- You icon or image here -->
</Button>

Accessibility #

  • Keyboard focus management and cross browser normalization.
  • Hover management and cross browser normalization.
  • Exposed as a tooltip to assistive technology via ARIA.
  • Matches native tooltip behavior with delay on hover of first tooltip and no delay on subsequent tooltips.

API #

Button provides APIs(Properties) that is necessary for you to configure a Button compponent.

Button Props #

Name Type Default Value
variant 'primary' | 'secondary' | 'success' | 'warning' | 'danger' primary
size 'sm' | 'md' | 'lg' md
kind 'solid' | 'bordered' | 'flat' | 'shadow' solid
rounded 'none' | 'sm' | 'md' | 'lg' | 'full' full
disabled boolean false
href string ""
iconOnly boolean false
classes { base: string } {}

Button Handlers #

Name Type Description
on:click MouseEventHandler Button click handler
on:change FormEventHandler The change event is fired for , , and elements when a change to the element value is committed by the user.
on:keydown KeyboardEventHandler A key is pressed down.
on:keyup KeyboardEventHandler A key is released.
on:mouseenter MouseEventHandler A pointing device is moved onto the element that has the listener attached.
on:mouseleave MouseEventHandler A pointing device is moved off the element that has the listener attached.

Button Slots #

Name Description
base This slot is applied to button element.
<Installation Checkbox>