zidanecomponents/button
import { … } from 'zidane-ui'ui/src/components/button.ts
Functions#
buttonClassFunction#
The button look as a class string, for <button>, <a> or a router link alike.
function buttonClass(
options?: { flush?: 'start' | 'end'; size?: ButtonSize; variant?: ButtonVariant },
): stringParameters
| Name | Type | Default | Description |
|---|---|---|---|
| options? | { flush?: 'start' | 'end'; size?: ButtonSize; variant?: ButtonVariant } | {} | The variant, size and flush alignment of the button. Defaults to a |
Returns
stringThe class string for the button look.
Constants#
BTN_DANGERConstant#
In-row destructive action (Remove / Delete / Clear): quiet until hovered.
const BTN_DANGER = ...BTN_DANGER_CONFIRMConstant#
Armed destructive confirm (Confirm remove / Confirm delete): the danger fill.
const BTN_DANGER_CONFIRM = ...BTN_LG_DANGERConstant#
Destructive dialog footer action (Delete session, Deny): the danger fill.
const BTN_LG_DANGER = ...BTN_LG_PRIMARYConstant#
Primary header action or form submit, soft accent.
const BTN_LG_PRIMARY = ...BTN_LG_SECONDARYConstant#
Secondary header / footer action (Refresh / Cancel …): the accent button stays rightmost.
const BTN_LG_SECONDARY = ...BTN_LG_SOLIDConstant#
The committing action of a dialog footer: accent fill.
const BTN_LG_SOLID = ...BTN_PRIMARYConstant#
In-row primary action (Sign in / Retry / Import …): soft accent, not a slab.
const BTN_PRIMARY = ...BTN_SECONDARYConstant#
In-row secondary action (Edit / Update / Sign out / Keep / Cancel …).
const BTN_SECONDARY = ...Types#
ButtonVariantType#
Look of a button: secondary (raised chip), primary (soft accent wash), solid (accent fill
for the committing action of a dialog), ghost (text only), danger (muted red) and
danger-solid (danger fill for the destructive commit).
type ButtonVariant =
| 'secondary'
| 'primary'
| 'solid'
| 'ghost'
| 'danger'
| 'danger-solid'