One Teva Design System

UI Elements

Button Element

Button element for generating links and buttons with a button-like appearance.

Default

This is the default appearance of the button.

Button 
<!-- source -->
<vision-button>Button</vision-button>

Families

A button family can be choosen by the family attribute.

Options are: solid, outline, soft, ghost and link.

Button Button Button Button 
<!-- source -->
<vision-button title="Not a button" family="outline">Button</vision-button>
<vision-button family="soft">Button</vision-button>
<vision-button family="ghost">Button</vision-button>
<vision-button family="link">Button</vision-button>

Variants

A button variant can be choosen by the variant attribute.

Options are: default, 1, 2, 3, error and inversed.

Button Button Button Button Button 
<!-- source -->
<vision-button variant="1">Button</vision-button>
<vision-button variant="2">Button</vision-button>
<vision-button variant="3">Button</vision-button>
<vision-button variant="error">Button</vision-button>
<vision-button variant="inversed">Button</vision-button>

Pointer

A button can show a pointer icon by setting the pointer attribute.

Button Button Button Button 
<!-- source -->
<vision-button pointer="true" family="outline">Button</vision-button>
<vision-button pointer="true" family="soft">Button</vision-button>
<vision-button pointer="true" family="ghost">Button</vision-button>
<vision-button pointer="true" family="link">Button</vision-button>