blue
View on GitHub

Button

A button allows users to trigger an action or event, such as submitting a form, triggering a process or navigate users within an application.

Usage

Light
Blue
Zoho Puvi 
<script>
	import { Button } from 'deskblocks';
</script>

<Button>Label</Button>

Variants

Light
Blue
Zoho Puvi 
<Button variant="primary">Label</Button>
<Button variant="secondary">Label</Button>
<Button variant="tertiary">Label</Button>

<!-- Destructive -->
<Button variant="danger">Label</Button>
<Button variant="danger-secondary">Label</Button>

<!-- Ghost -->
<Button variant="ghost">Label</Button>

Link button

A button can be turned into a link by using the href property, making it function like an anchor tag.

Security Considerations:

Light
Blue
Zoho Puvi
Open Link 
<Button href="https://zoho.com/desk">Open Link</Button>

Disabled state

Light
Blue
Zoho Puvi 
<Button disabled variant="primary">Label</Button>
<Button disabled variant="secondary">Label</Button>
<Button disabled variant="tertiary">Label</Button>
<Button disabled variant="danger">Label</Button>
<Button disabled variant="danger-secondary">Label</Button>
<Button disabled variant="ghost">Label</Button>

Buton with icon

The slots labeled “left-icon” and “right-icon” should be used for placing icons on the left and right sides, respectively. The icon’s color is automatically selected by the component based on the context.

Note:

When an Icon component is passed to the designated slots (either "left-icon" or "right-icon"), the component automatically adjust its padding optically. However, if the Icon is placed in the default slot alongside the label, these padding adjustments won't be applied.
Light
Blue
Zoho Puvi 
<script>
	import { Button, Icon } from 'deskblocks';
	import { IconIdea } from 'deskblocks/icons';
</script>

<Button>
	<Icon slot="left-icon" icon={IconIdea} /> Get Started
</Button>

<Button>
	<Icon slot="right-icon" icon="→" /> Get Started
</Button>

Icon button

To render an icon on its own, the IconButton component can be used. The icon’s color is automatically determined by the component based on the context.

Light
Blue
Zoho Puvi 
<script>
	import { IconButton, Icon } from 'deskblocks';
	import { IconUndo } from 'deskblocks/icons';
</script>

<IconButton><Icon icon={IconUndo} /></IconButton>
<IconButton variant="secondary"><Icon icon={IconUndo} /></IconButton>
<IconButton variant="tertiary"><Icon icon={IconUndo} /></IconButton>
<IconButton variant="danger"><Icon icon={IconUndo} /></IconButton>
<IconButton variant="danger-secondary"><Icon icon={IconUndo} /></IconButton>
<IconButton variant="ghost"><Icon icon={IconUndo} /></IconButton>

Loading state

The loading state for the button can be displayed by placing the Spinner component in the left-icon slot.

Light
Blue
Zoho Puvi 
<script>
	import { Button, Spinner } from 'deskblocks';
</script>

<Button>
	<Spinner slot="left-icon" onbrand /> Loading
</Button>

Props

variant ‘primary’ | ‘secondary’ | ‘tertiary’ | ‘ghost’ | ‘danger’ | ‘danger-secondary’ ‘primary’ Determines the visual style of the button.
disabled boolean false Disables the button, preventing user interaction.
href string undefined Specifies the URL to navigate to when the button is clicked, making the button function as a link.
popovertarget string undefined Specifies the ID of an associated popover element that will be triggered by the button.
tabindex number 0 Sets the order in which the button is focused during keyboard navigation.
class string undefined Custom CSS class name for additional styling.

Slots

Events