Button - Frameworks
Buttons initiate events or actions within a page, informing users of what to expect next.
Elements
Syntax
<w-button variant="primary">Primary button</w-button>Usage Notes
Do:
- Use the
<w-button>component when you need a button that looks like a button. - Use the
<w-button>component when you need a button that looks like a link.
Do Not:
- Use the
<w-button>component when you need a link that looks like a button. In that case, use the native<w-link>tag. - Use the
<w-button>component when you need a link that looks like a link. In that case, use the native<a>tag.
The following table illustrates use cases and which element to use for the purpose.
| if desired behaviour is | and desired styling is | then use |
|---|---|---|
| link | button | w-link |
| button | button | w-button |
| link | link | a |
| button | link | w-button |
Variants
Primary
The primary button is a call to action. Can be combined with "small" attribute.
<w-button variant="primary">Primary button</w-button>
<w-button variant="primary" small>Primary button small</w-button>Secondary
The secondary button is for secondary or tertiary actions. Can be combined with "small" and "quiet" attributes. "secondary" is the default value of the "variant" attribute.
<w-button variant="secondary">Secondary button</w-button>
<w-button variant="secondary" small>Secondary button small</w-button>Negative
The negative button is for emphasizing actions that can be destructive or have negative consequences if taken. Can be combined with "small" and "quiet" attributes.
<w-button variant="negative">Negative button</w-button>
<w-button variant="negative" small>Negative button small</w-button>Utility
<w-button variant="utility">Utility button</w-button>
<w-button variant="utility" small>Utility button small</w-button>The utility variant combined with quiet replaces the deprecated pill variant.
<w-button variant="utility" quiet="">
<w-icon-share-16></w-icon-share-16>
</w-button>Link
Style the button to look like a link
<w-button variant="link">Link button</w-button>
<w-button variant="link" small>Link button small</w-button>Quiet
By default, buttons have a visible stroke and fill. Quiet buttons do not have this visible stroke or fill and should only be used for secondary actions within a button group. Quiet buttons have the same padding rules as other action buttons and reveal a button-like background color when hovered.
<w-button quiet="">Quiet secondary button</w-button>
<w-button quiet="" variant="negative">Quiet negative button</w-button>
<w-button quiet="" variant="utility">Quiet utility button</w-button>Link
Buttons will be rendered as an anchor (a tag) if they use the href attribute.
<w-button href="https://google.no">Button as anchor</w-button>But if you need a button to look like a link, use the link variant.
<w-button variant="link">Link button</w-button>However, it is not recommended to use the link variant in combination with the href attribute. If there is a need to have an anchor (a tag) that should still look like a link, the recommendation is to instead use the <a> HTML element.
Loading state
To show the user that the action they triggered has begun, buttons have an in progress or loading state.
<w-button variant="primary" loading="">Primary button loading</w-button>Full width
The fullWidth prop sets the button's width to its parent's width.
<div class="w-full">
<w-button full-width variant="primary">Primary button full width</w-button>
</div>Disabled state
Disabled is an anti-pattern and is not supported. There will always be users who don't understand why an element is disabled, or users who can't even see that it is disabled because of poor lighting conditions or other reasons.
Props
Optional Props
| Name | Type | Default | Description |
|---|---|---|---|
| type | "button"|"submit"|"reset" | button | Button type, only applied when href is not set. |
| variant | "primary" | "secondary" | "negative" | "utility" | "link" | "~~pill~~" | secondary | Variant of button. pill has been @deprecated. Use utility together with quiet instead. |
| quiet | boolean | false | |
| small | boolean | false | |
| loading | boolean | false | |
| href | string | Set the href for the location where clicking the button will take you to. Uses an a tag instead of a button tag for the underlying implementation. Should not be combined with variant link | |
| target | string | Anchor target, see The Anchor element / MDN Web Docs. | |
| rel | string | The relationship of the linked URL. | |
| fullWidth | boolean | Sets the button's width to its parent's width. Useful especially on mobile when button should take full width. |
Questions?
Feel free to ask any questions on usage in the Warp DS Slack channel: #warp-design-system