Button

Atom

Temel interaktif element. 5 görsel stil (variant) ve 5 boyut (size) destekler. disabled durumu yerleşiktir.

Primary

Preview

Code

<%- include('modules/ui/Button', { children: 'Primary' }) %>

Secondary

Preview

Code

<%- include('modules/ui/Button', { variant: 'secondary', children: 'Secondary' }) %>

Ghost

Preview

Code

<%- include('modules/ui/Button', { variant: 'ghost', children: 'Ghost' }) %>

Danger

Preview

Code

<%- include('modules/ui/Button', { variant: 'danger', children: 'Danger' }) %>

Outline

Preview

Code

<%- include('modules/ui/Button', { variant: 'outline', children: 'Outline' }) %>

Disabled

Preview

Code

<%- include('modules/ui/Button', { disabled: true, children: 'Disabled' }) %>

Sizes

Preview

Code

<%- include('modules/ui/Button', { size: 'xs', children: 'XS' }) %>
<%- include('modules/ui/Button', { size: 'sm', children: 'SM' }) %>
<%- include('modules/ui/Button', { size: 'md', children: 'MD' }) %>
<%- include('modules/ui/Button', { size: 'lg', children: 'LG' }) %>
<%- include('modules/ui/Button', { size: 'xl', children: 'XL' }) %>

Icon left / right

Preview

Code

<%- include('modules/ui/Button', { iconLeft: '', children: 'Download' }) %>
<%- include('modules/ui/Button', { variant: 'outline', iconRight: '', children: 'Next' }) %>

Full width

Preview

Code

<%- include('modules/ui/Button', { fullWidth: true, children: 'Full-width primary' }) %>
<%- include('modules/ui/Button', { variant: 'outline', fullWidth: true, children: 'Full-width outline' }) %>

Source modules/ui/Button.ejs

<%
var _v  = locals.variant  || 'primary';
var _sz = locals.size     || 'md';
var _tp = locals.type     || 'button';

var vc = {
  primary:   'bg-primary text-primary-fg hover:bg-primary-hover',
  secondary: 'bg-secondary text-secondary-fg hover:bg-secondary-hover',
  ghost:     'bg-transparent text-text-primary hover:bg-surface-overlay',
  danger:    'bg-error text-text-inverse hover:opacity-90',
  outline:   'border border-border text-text-primary hover:bg-surface-overlay',
}[_v] || 'bg-primary text-primary-fg hover:bg-primary-hover';

var sc = {
  xs: 'px-2 py-1 text-xs',
  sm: 'px-3 py-1.5 text-sm',
  md: 'px-4 py-2 text-sm',
  lg: 'px-5 py-2.5 text-base',
  xl: 'px-6 py-3 text-lg',
}[_sz] || 'px-4 py-2 text-sm';
%>