Button

Trigger an action. Use ButtonLink when the control changes the URL.

Sizes

Default in this port is small (32px), matching product chrome. medium is 40px, large is 48px.


        
          1
          
          <Button size="small">Upload</Button>
        

          2
          
          <Button size="medium">Upload</Button>
        

          3
          
          <Button size="large">Upload</Button>

Variants


        
          1
          
          <Button variant="default">Upload</Button>
        

          2
          
          <Button variant="secondary">Upload</Button>
        

          3
          
          <Button variant="tertiary">Upload</Button>
        

          4
          
          <Button variant="error">Upload</Button>
        

          5
          
          <Button variant="warning">Upload</Button>

Shapes

Icon-only buttons need svg-only and an aria-label.


        
          1
          
          <Button shape="square" size="small" svg-only aria-label="Upload">
        

          2
          
            <Icon :icon="ArrowUp01Icon" :size="14" />
        

          3
          
          </Button>

Prefix and suffix


        
          1
          
          <Button size="small">
        

          2
          
            <template #prefix>
        

          3
          
              <Icon :icon="ArrowLeft01Icon" :size="14" />
        

          4
          
            </template>
        

          5
          
            Upload
        

          6
          
          </Button>

Loading and disabled


        
          1
          
          <Button size="small" loading>Upload</Button>
        

          2
          
          <Button size="small" disabled>Upload</Button>

Link


        
          1
          
          <ButtonLink href="/" size="small">Sign Up</ButtonLink>

Custom

Override foreground, background, and border for normal / hover / active.


        
          1
          
          <CustomButton
        

          2
          
            :normal="{ foreground: '#fff', background: 'var(--ds-blue-700)', border: 'var(--ds-blue-700)' }"
        

          3
          
            :hover="{ foreground: '#fff', background: '#0B7BFE', border: 'var(--ds-blue-700)' }"
        

          4
          
            :active="{ foreground: '#fff', background: 'var(--ds-blue-700)', border: 'var(--ds-blue-700)' }"
        

          5
          
          >
        

          6
          
            Upgrade to Pro
        

          7
          
          </CustomButton>

Best practices

Button mutates state. ButtonLink changes the URL. More than one related action in a row → Menu or Split Button.
Primary is default. Supporting is secondary. Destructive confirmations use error.
Form submit uses type-name="submit". Visual variant stays on variant / type.
Pass loading instead of swapping a spinner so the control stays focusable.
Disable only when the action is impossible. Explain why with a Tooltip.
Aliases ghost → tertiary and outline → secondary exist for older screens. New code should use Hesoyam names.