UNPKG

dap-design-system

Version:

Official design system for the DÁP (dap.gov.hu)

ghes.idomsoft.hu/idom-green/dap-design-system

55 lines (54 loc) • 5.05 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
import { default as Component } from '../../components/icon-button/icon-button.js'; /** * `dap-ds-icon-button` * @summary An icon button is a button with an icon. * @element dap-ds-icon-button * @title - Icon button * * @property {string} ariaLabel - The aria label of the button. * * @slot - The icon of the button. * * @csspart base - The main button container. * @csspart content - The icon of the button. * @csspart icon - The icon of the icon. * @csspart icon-base - The base of the icon. * * @cssproperty --dds-icon-button-border-width - Border width of the icon button (default: var(--dds-border-width-base)) * @cssproperty --dds-icon-button-border-color - Border color of the icon button (default: var(--dds-border-neutral-transparent-interactive, #fff500)) * @cssproperty --dds-icon-button-border-radius - Border radius of the icon button (default: var(--dds-radius-rounded)) * @cssproperty --dds-icon-button-hover-border-width - Border width on hover (default: var(--dds-border-width-large)) * @cssproperty --dds-icon-button-active-border-width - Border width when active (default: var(--dds-border-width-xlarge)) * @cssproperty --dds-icon-button-transition - Transition property for the icon button (default: var(--dds-transition-all)) * @cssproperty --dds-icon-button-cursor - Cursor style for the button (default: pointer) * @cssproperty --dds-icon-button-disabled-cursor - Cursor style for the disabled button (default: not-allowed) * @cssproperty --dds-icon-button-column-gap - Column gap between elements (default: var(--dds-spacing-100)) * @cssproperty --dds-icon-button-padding-lg - Padding for large size (default: var(--dds-spacing-0)) * @cssproperty --dds-icon-button-padding-md - Padding for medium size (default: var(--dds-spacing-100)) * @cssproperty --dds-icon-button-padding-sm - Padding for small size (default: var(--dds-spacing-50)) * @cssproperty --dds-icon-button-padding-xs - Padding for extra small size (default: var(--dds-spacing-25)) * @cssproperty --dds-icon-button-size-lg - Size for large icon button (default: var(--dds-spacing-800)) * @cssproperty --dds-icon-button-size-md - Size for medium icon button (default: var(--dds-spacing-600)) * @cssproperty --dds-icon-button-size-sm - Size for small icon button (default: var(--dds-spacing-400)) * @cssproperty --dds-icon-button-size-xs - Size for extra small icon button (default: var(--dds-spacing-300)) * @cssproperty --dds-icon-button-neutral-bg - Background color for neutral variant (default: var(--dds-transparent-black-subtle)) * @cssproperty --dds-icon-button-neutral-color - Text color for neutral variant (default: var(--dds-icon-neutral-base)) * @cssproperty --dds-icon-button-neutral-hover-bg - Hover background color for neutral variant (default: var(--dds-transparent-black-base)) * @cssproperty --dds-icon-button-neutral-active-bg - Active background color for neutral variant (default: var(--dds-transparent-black-medium)) * @cssproperty --dds-icon-button-brand-bg - Background color for brand variant (default: var(--dds-button-subtle-background-enabled)) * @cssproperty --dds-icon-button-brand-color - Text color for brand variant (default: var(--dds-button-subtle-icon-enabled)) * @cssproperty --dds-icon-button-brand-hover-bg - Hover background color for brand variant (default: var(--dds-button-subtle-background-hover)) * @cssproperty --dds-icon-button-brand-active-bg - Active background color for brand variant (default: var(--dds-button-subtle-background-pressed)) * @cssproperty --dds-icon-button-inverted-bg - Background color for inverted variant (default: var(--dds-transparent-white-subtle)) * @cssproperty --dds-icon-button-inverted-color - Text color for inverted variant (default: var(--dds-button-primary-icon-enabled)) * @cssproperty --dds-icon-button-inverted-hover-bg - Hover background color for inverted variant (default: var(--dds-transparent-white-base)) * @cssproperty --dds-icon-button-inverted-active-bg - Active background color for inverted variant (default: var(--dds-transparent-white-medium)) * @cssproperty --dds-icon-button-inverted-brand-bg - Background color for inverted brand variant (default: var(--dds-button-primary-background-enabled)) * @cssproperty --dds-icon-button-inverted-brand-color - Text color for inverted brand variant (default: var(--dds-button-primary-icon-enabled)) * @cssproperty --dds-icon-button-inverted-brand-hover-bg - Hover background color for inverted brand variant (default: var(--dds-button-primary-background-enabled)) * @cssproperty --dds-icon-button-inverted-brand-active-bg - Active background color for inverted brand variant (default: var(--dds-button-primary-background-enabled)) * @cssproperty --dds-icon-button-disabled-color - Color for disabled state (default: var(--dds-icon-neutral-disabled)) * @cssproperty --dds-icon-button-disabled-bg - Background color for disabled state (default: transparent) */ declare const reactWrapper: import('@lit/react').ReactWebComponent<Component, {}>; export default reactWrapper;