components

Button

Buttons are used as triggers for actions. They are used in forms, toolbars, dialog footers and as stand-alone action triggers.

components

Button

Buttons are used as triggers for actions. They are used in forms, toolbars, dialog footers and as stand-alone action triggers.

components

Button

Buttons are used as triggers for actions. They are used in forms, toolbars, dialog footers and as stand-alone action triggers.

Variants

Anatomy

Properties

Properties

Vertical Exposure

Description

1. Container

unremovable

unchangeable

Color

B400

B300

B200

B100

R200

R100

N200

N0

none (trasparent)

None

Predefined by variants

Width

full-width

hug

None

Radius

8px

6px

None

  1. Icon

removable

changeable

Color

icon invert

icon activity

icon alert

icon HE

None

Predefined by variants

Size

follow variants

None

Source

TDS asset

None

  1. Button Text

unremovable

Color

text invert

text activity

text alert

text HE

text disabled

None

Predefined by variants

Typography token

body 1 - bold

body 2 - bold

body 3 - bold

None

Predefined by variants

Overflow handling

truncation : end

None

Alignment

align-center

None

Anatomy

Dimension

Variants

Anatomy

Properties

Properties

Vertical Exposure

Description

1. Container

unremovable

unchangeable

Color

B400

B300

B200

B100

R200

R100

N200

N0

none (trasparent)

None

Predefined by variants

Width

full-width

hug

None

Radius

8px

6px

None

  1. Icon

removable

changeable

Color

icon invert

icon activity

icon alert

icon HE

None

Predefined by variants

Size

follow variants

None

Source

TDS asset

None

  1. Button Text

unremovable

Color

text invert

text activity

text alert

text HE

text disabled

None

Predefined by variants

Typography token

body 1 - bold

body 2 - bold

body 3 - bold

None

Predefined by variants

Overflow handling

truncation : end

None

Alignment

align-center

None

Anatomy

Dimension

Variants

Anatomy

Properties

Properties

Vertical Exposure

Description

1. Container

unremovable

unchangeable

Color

B400

B300

B200

B100

R200

R100

N200

N0

none (trasparent)

None

Predefined by variants

Width

full-width

hug

None

Radius

8px

6px

None

  1. Icon

removable

changeable

Color

icon invert

icon activity

icon alert

icon HE

None

Predefined by variants

Size

follow variants

None

Source

TDS asset

None

  1. Button Text

unremovable

Color

text invert

text activity

text alert

text HE

text disabled

None

Predefined by variants

Typography token

body 1 - bold

body 2 - bold

body 3 - bold

None

Predefined by variants

Overflow handling

truncation : end

None

Alignment

align-center

None

Anatomy

Dimension

design@tiket.com

© Passport tiketdesign 2024. All Right Reserved.

design@tiket.com

© Passport tiketdesign 2024.
All Right Reserved.