/
npmgit

Button

Базовый компонент кнопки. Basic button component.

Import

js
import ProximaButton from 'proxima-vue/button';

Playground

Props
View
Width
Round
Shadow
Click effect
js
import ProximaButton from 'proxima-vue/button';
html
<ProximaButton
  text="Click me"
/>

Icon

В качестве иконки в пропс icon можно передать импортированный объект или название зарегистрированного компонента, для позиционирования iconPosition, а для параметров iconProps: You can pass an imported object or the name of a registered component in the icon prop. For positioning, use iconPosition, and for icon properties, use iconProps:

html
<ProximaButton
  text="Icon before"
  :icon="ProximaIconPlus"
/>

<ProximaButton
  :icon="ProximaIconPlus"
  :icon-props="{ size: 'm' }"
  width="sym"
/>

<ProximaButton
  text="Icon after"
  :icon="ProximaIconPlus"
  icon-position="after"
/>
ts
import ProximaButton from 'proxima-vue/button';
import ProximaIconPlus from 'proxima-vue/icon/plus';

Link

Пропс href сделает кнопку ссылкой: The href prop will turn the button into a link:

View source on GitHub
html
<ProximaButton
  text="View source on GitHub"
  href="https://github.com/werty1001/proxima"
/>

Skeleton

Режим плейсхолдера во время загрузки Placeholder mode on loading

Атрибут data‑ghost требует The attribute data‑ghost requires ghost.css

html
<div data-ghost="true" inert>
  <ProximaButton
    text="Click me"
  />
</div>
Accessibility

Компонент использует нативные теги: button и a, текст внутри доступен для вспомогательных технологий, поэтому всегда используйте текстовое описание, если по дизайну требуется только иконка, то текст можно визуально скрыть: The component uses native tags: button and a. The text inside is available for assistive technologies, so always use a text description. If the design requires only an icon, then the text can be visually hidden:

Для работы visually‑hidden требуется The prop visually‑hidden requires accessibility.css

html
<ProximaButton
  text="text only for assistive technologies"
  text-visually-hidden
/>

BEM

Блок компонента button, модификаторы (создаются автоматически на основе пропсов): Component block button, modifiers (automatically created based on props):

  • button_enabled button_disabled
  • button_width_auto button_width_max button_width_sym
  • button_view_plain button_view_text button_view_outline
  • button_round_soft button_round_full button_round_none
  • button_shadow_none button_shadow_soft button_shadow_wide
  • button_size_xxs button_size_xs button_size_s button_size_normal button_size_m button_size_l button_size_xl button_size_xxl
  • button_effect_none button_effect_ripple button_effect_pulse
  • button_has_effect
  • button_external_link
  • button_theme_[name]

CSS

Слой компонента @layer proxima.button, также вы можете гибко cтилизовать компонент через кастомные свойства: Component layer @layer proxima.button, also you can style the component flexibly through custom properties:

css
--button-theme-color: #0071e3;
--button-color: #fff;

--button-width: auto;
--button-gap: 0.375em;

/* Icon */
--button-icon-size: 1em;

/* Text */
--button-font-family: inherit;
--button-font-weight: 400;
--button-text-transform: none;
--button-line-height: 1;
--button-letter-spacing: 0.0125em;

/* Padding */
--button-padding-x-divider: 2.25;
--button-padding-x: calc(
  var(--button-size) / var(--button-padding-x-divider)
);
--button-padding-y: 0;
--button-width-sym-padding: 0;

/* Border */
--button-border-opacity: 0.5;
--button-border-width: 1px;
--button-border-style: solid;
--button-border-color: color-mix(in srgb,
  var(--button-theme-color), transparent var(--button-border-opacity)
);

/* Soft round */
--button-border-radius-divider: 8;
--button-border-radius: calc(
  var(--button-size) / var(--button-border-radius-divider)
);

/* Shadow */
--button-box-shadow-opacity: 0.2;
--button-box-shadow-color: color-mix(in srgb,
  var(--button-theme-color), transparent var(--button-box-shadow-opacity)
);
--button-box-shadow-soft-size: 0 0.25em 0.25em 0;
--button-box-shadow-soft-color: var(--button-box-shadow-color);
--button-box-shadow-wide-size: 0 0.5em 1em 0;
--button-box-shadow-wide-color: var(--button-box-shadow-color);

/* Ripple effect */
--button-effect-ripple-size: calc(var(--button-size) * 4);
--button-effect-pulse-color: var(--button-theme-color);
--button-effect-z-index: 0;

/* Diff */
--button-transparent-background-opacity: 0;
--button-transition:
  color 200ms,
  background-color 200ms,
  border-color 200ms;

/*
  States
*/

/* Hover */
--button-hover-transparent-background-opacity: 0.08;
--button-hover-border-opacity: 1;
--button-hover-border-style: var(--button-border-style);
--button-hover-border-color: var(--button-border-color);
--button-hover-color: var(--button-color);
--button-hover-box-shadow-opacity: 0.3;
--button-hover-mix-color: #000;
--button-hover-mix-opacity: 0.12;
--button-hover-theme-color: color-mix(in srgb,
  var(--button-theme-color), var(--button-hover-mix-color) var(--button-hover-mix-opacity)
);

/* Focus */
--button-focus-theme-color: var(--button-theme-color);
--button-focus-border-style: var(--button-border-style);

/* Disabled */
--button-disabled-theme-color: var(--button-theme-color);
--button-disabled-opacity: var(--app-disabled-opacity);

/* Focus highlight */
--button-highlight-offset: var(--app-highlight-offset);
--button-highlight-style: var(--app-highlight-style);
--button-highlight-size: var(--app-highlight-size);
--button-highlight-color: var(--app-highlight-color);

/* Tab focus outline */
--button-outline-offset: var(--app-outline-offset);
--button-outline-size: var(--app-outline-size);
--button-outline-style: var(--app-outline-style);
--button-outline-color: var(--app-outline-color);

/*
  Sizes
*/

--button-size-xxs: 1.875rem;
--button-font-size-xxs: 0.75rem;

--button-size-xs: 2.25rem;
--button-font-size-xs: 0.875rem;

--button-size-s: 2.5rem;
--button-font-size-s: 0.875rem;

/* Normal */
--button-size: 2.75rem;
--button-font-size: 1rem;

--button-size-m: 3rem;
--button-font-size-m: 1rem;

--button-size-l: 3.375rem;
--button-font-size-l: 1.125rem;

--button-size-xl: 3.75rem;
--button-font-size-xl: 1.25rem;

--button-size-xxl: 4.125rem;
--button-font-size-xxl: 1.375rem;

/*
  Flags (0 or 1, based on props)
*/
--button-has-effect: 0;
--button-is-full-round: 0;

--button-is-view-plain: 0;
--button-is-view-text: 0;
--button-is-view-outline: 0;

--button-is-active: 0;
--button-is-hover: 0;
--button-is-focus: 0;

--button-is-enabled: 0;
--button-is-disabled: 0;
Theme

Используя кастомные свойства и специальный пропс theme можно легко создавать свои темы: By using custom properties and the prop theme, you can easily create your own themes:

html
<ProximaButton
  text="Click me"
  theme="secondary"
/>
css
.button_theme_secondary {
  --button-theme-color: #42b883;
  --button-hover-theme-color: #2f77ec;
}
Props
ts
interface ProximaButtonProps {
  text?: string
  href?: string
  icon?: ProximaDynamicComponent
  iconProps?: ProximaDynamicProps
  iconPosition?: 'before' | 'after'
  textVisuallyHidden?: boolean
  disabled?: boolean
  width?: 'auto' | 'max' | 'sym'
  view?: 'plain' | 'text' | 'outline'
  size?: ProximaSize
  round?: ProximaRound
  shadow?: ProximaShadow | 'wide'
  effect?: ProximaClickEffect
  theme?: string
}
Slots
html
<ProximaButton>
  <template #prepend="slotProps">
    you code (prepend to inner)
  </template>

  <template #icon="slotProps">
    you code (replaced icon)
  </template>

  <template #text="slotProps">
    you code (replaced text)
  </template>
</ProximaButton>
ts
type SlotProps = {
  text: string
  href: string
  textVisuallyHidden: boolean
  isInternalLink: boolean
  isButton: boolean
  hasEffect: boolean
  disabled: boolean
  focus: () => void
}
Expose
html
<ProximaButton ref="button" />
ts
import { ref, unref, onMounted } from 'vue';
import ProximaButton from 'proxima-vue/button';

const button = ref({} as InstanceType<typeof ProximaButton>);

onMounted(() => {
  unref(button).focus();
});
ts
type ProximaButtonInstance = {
  focus: () => void
}
View source on GitHub