Button Web Component Examples
The <dsn-button> web component provides a consistent
button API across frameworks. It uses the same design tokens and visual
styling as the HTML and React button components.
Button Variants
Strong (Main actions)
Save
Submit
Continue
<dsn-button variant="strong">Save</dsn-button>
Default (Alternative actions)
Cancel
Back
Learn more
<dsn-button variant="default">Cancel</dsn-button>
Subtle (Low emphasis)
Edit
Share
More
<dsn-button variant="subtle">Edit</dsn-button>
Link (Text-style button)
Learn more
View details
Skip
<dsn-button variant="link">Learn more</dsn-button>
Negative Sentiment
Strong Negative (Destructive actions)
Delete
Remove
Reset
<dsn-button variant="strong-negative">Delete</dsn-button>
Default Negative
Delete
Remove
Discard
Subtle Negative
Delete
Remove
Discard
Positive Sentiment
Strong Positive (Confirmation actions)
Approve
Confirm
Accept
<dsn-button variant="strong-positive">Approve</dsn-button>
Default Positive
Approve
Like
Enable
Subtle Positive
Like
Upvote
Star
Button Sizes
Small
Small Strong
Small Default
Small Negative
<dsn-button variant="strong" size="small">Small
Strong</dsn-button>
Default (Medium)
Default Strong
Default Default
Default Negative
<dsn-button variant="strong" size="default">Default
Strong</dsn-button>
Large
Large Strong
Large Default
Large Negative
<dsn-button variant="strong" size="large">Large
Strong</dsn-button>
Buttons with Icons
Icon + Text
Icon Only
<dsn-button variant="strong" icon-only
aria-label="Add">
<svg ...>...</svg>
</dsn-button>
Button States
Disabled
Disabled Strong
Disabled Default
Disabled Negative
<dsn-button variant="strong" disabled>Disabled
Strong</dsn-button>
Loading
Saving...
Loading...
<dsn-button variant="strong" loading>Saving...</dsn-button>
Full Width Buttons
Full Width Strong
Full Width Default
<dsn-button variant="strong" full-width>Full Width
Strong</dsn-button>
API Comparison
The <dsn-button> web component uses the same naming
conventions as the React component:
| Feature |
HTML (CSS classes) |
React (props) |
Web Component (attributes) |
| Variant |
dsn-button--strong |
variant="strong" |
variant="strong" |
| Size |
dsn-button--size-small |
size="small" |
size="small" |
| Loading |
dsn-button--loading |
loading |
loading |
| Full width |
dsn-button--full-width |
fullWidth |
full-width |
| Icon only |
dsn-button--icon-only |
iconOnly |
icon-only |
| Disabled |
disabled |
disabled |
disabled |