WELCOME

Introduction

FOUNDATIONS

Colors

Typography

Spacing&Grids

Shadows

COMPONENTS

Icons

Buttons

Dropdowns

Charts

Modules

Miscellaneous

Cards

Navigation

PROTOTYPES

Desktop

Mobile

Telescope Design System > Foundations > Buttons

Buttons

Buttons communicate actions that users can take.

Anatomy

Button

x

2x

1,5x

x

1,5x

2x

x+8

Formula

Spacing: x

Text Height: x+8 px

Text Width: Variable

Icon Height: x+8 px

Icon Width: x+8 px

Vertical Padding: 1,5x

Horizontal Padding: 2x

Variants

Button/Small

x: 4 px

Button/Medium

x: 8 px

Button/Large

x: 12 px

Horizontal Padding: 3x

Variants

Primary, Small, Icon-Left=False, Icon-Right=False, Fill=True, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Primary, Medium, Icon-Left=False, Icon-Right=False, Fill=True, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Primary, Large, Icon-Left=False, Icon-Right=False,Fill=True, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Secondary, Small, Icon-Left=False, Icon-Right=False, Fill=True, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Secondary, Medium, Icon-Left=False, Icon-Right=False, Fill=True, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Secondary, Large, Icon-Left=False, Icon-Right=False, Fill=True, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Gray, Small, Icon-Left=False, Icon-Right=False, Fill=True, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Gray, Medium, Icon-Left=False, Icon-Right=False, Fill=True, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Gray, Large, Icon-Left=False, Icon-Right=False, Fill=True, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Gray, Small, Icon-Left=False, Icon-Right=False, Fill=True, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Gray, Medium, Icon-Left=False, Icon-Right=False, Fill=True, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Gray, Large, Icon-Left=False, Icon-Right=False, Fill=True, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Outline, Small, Icon-Left=False, Icon-Right=False, Fill=False, Outline=True, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Outline, Medium, Icon-Left=False, Icon-Right=False, Fill=False, Outline=True, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Outline, Large, Icon-Left=False, Icon-Right=False, Fill=False, Outline=True, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Primary, Small, Icon-Left=True, Icon-Right=False, Fill=True, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Primary, Medium, Icon-Left=True, Icon-Right=False, Fill=True, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Primary, Large, Icon-Left=True, Icon-Right=False,Fill=True, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Secondary, Small, Icon-Left=True, Icon-Right=False, Fill=True, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Secondary, Medium, Icon-Left=True, Icon-Right=False, Fill=True, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Secondary, Large, Icon-Left=True, Icon-Right=False, Fill=True, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Gray, Small, Icon-Left=True, Icon-Right=False, Fill=True, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Gray, Medium, Icon-Left=True, Icon-Right=False, Fill=True, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Gray, Large, Icon-Left=True, Icon-Right=False, Fill=True, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Gray, Small, Icon-Left=True, Icon-Right=False, Fill=True, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Gray, Medium, Icon-Left=True, Icon-Right=False, Fill=True, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Gray, Large, Icon-Left=True, Icon-Right=False, Fill=True, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Outline, Small, Icon-Left=True, Icon-Right=False, Fill=False, Outline=True, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Outline, Medium, Icon-Left=True, Icon-Right=False, Fill=False, Outline=True, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Outline, Large, Icon-Left=True, Icon-Right=False, Fill=False, Outline=True, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Primary, Small, Icon-Left=True, Icon-Right=True, Fill=True, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Primary, Medium, Icon-Left=True, Icon-Right=True, Fill=True, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Primary, Large, Icon-Left=True, Icon-Right=True, Fill=True, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Secondary, Small, Icon-Left=True, Icon-Right=True, Fill=True, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Secondary, Medium, Icon-Left=True, Icon-Right=True, Fill=True, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Secondary, Large, Icon-Left=True, Icon-Right=True, Fill=True, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Gray, Small, Icon-Left=True, Icon-Right=True, Fill=True, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Gray, Medium, Icon-Left=True, Icon-Right=True, Fill=True, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Gray, Large, Icon-Left=True, Icon-Right=True, Fill=True, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Gray, Small, Icon-Left=True, Icon-Right=True, Fill=True, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Gray, Medium, Icon-Left=True, Icon-Right=True, Fill=True, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Gray, Large, Icon-Left=True, Icon-Right=True, Fill=True, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Outline, Small, Icon-Left=True, Icon-Right=True, Fill=False, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Outline, Medium, Icon-Left=True, Icon-Right=True, Fill=False, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled

Outline, Large, Icon-Left=True, Icon-Right=True, Fill=False, Outline=False, Destructive=False

Button

Default

Button

Hover

Button

Focused

Button

Disabled