Description

BaseTrigger is a foundational component for creating triggers with button-like behavior, resembling buttons, links, or filters.

Sizes, margins and paddings

BaseTrigger sizes, margins and paddings

Size (height in px)	Appearance example	Margins
M (28px)		The button has padding: 0 var(--intergalactic-spacing-2x), leading addon has margin-right: var(--intergalactic-spacing-2x), trailing addon has margin-left: var(--intergalactic-spacing-2x).
L (40px)		The button has padding: 0 var(--intergalactic-spacing-3x), leading addon has margin-right: var(--intergalactic-spacing-2x), trailing addon has margin-left: var(--intergalactic-spacing-2x).

Interaction

BaseTrigger states

State	Appearance example	Styles
Normal		The background uses --bg-primary-neutral token.
Hover		The background changes to --bg-primary-neutral-hover.
Active		The background reverts to --bg-primary-neutral, and border changes color to --border-info-active.
Invalid		The border changes color to --border-critical-active.
Valid		The border changes color to --border-success-active.
Disabled		The component changes opacity to --disabled-opacity.

BaseTrigger types

BaseTrigger has the following types for using in the different scenarios:

• ButtonTrigger
• FilterTrigger
• LinkTrigger

ButtonTrigger

ButtonTrigger has the same sizes as BaseTrigger has.

ButtonTrigger sizes

Size (height in px)	Appearance example
M (28px)
L (40px)

ButtonTrigger states

ButtonTrigger states

State	Appearance example
Normal
Hover
Active
Invalid
Disabled

FilterTrigger

This type has separate detailed FilterTrigger guide since it operates as an active state of a filter.

LinkTrigger

LinkTrigger has the styles of Link component.

LinkTrigger sizes

Size (height in px)	Appearance example
M (28px)
L (40px)

LinkTrigger states

LinkTrigger states

State	Appearance example
Normal
Hover
Active
Disabled