CARVIEW |
Select Language
HTTP/2 200
date: Wed, 23 Jul 2025 05:09:19 GMT
content-type: text/html; charset=utf-8
vary: X-PJAX, X-PJAX-Container, Turbo-Visit, Turbo-Frame, X-Requested-With,Accept-Encoding, Accept, X-Requested-With
etag: W/"059271a4930dfd233e789b4db4bc8d46"
cache-control: max-age=0, private, must-revalidate
strict-transport-security: max-age=31536000; includeSubdomains; preload
x-frame-options: deny
x-content-type-options: nosniff
x-xss-protection: 0
referrer-policy: no-referrer-when-downgrade
content-security-policy: default-src 'none'; base-uri 'self'; child-src github.githubassets.com github.com/assets-cdn/worker/ github.com/assets/ gist.github.com/assets-cdn/worker/; connect-src 'self' uploads.github.com www.githubstatus.com collector.github.com raw.githubusercontent.com api.github.com github-cloud.s3.amazonaws.com github-production-repository-file-5c1aeb.s3.amazonaws.com github-production-upload-manifest-file-7fdce7.s3.amazonaws.com github-production-user-asset-6210df.s3.amazonaws.com *.rel.tunnels.api.visualstudio.com wss://*.rel.tunnels.api.visualstudio.com objects-origin.githubusercontent.com copilot-proxy.githubusercontent.com proxy.individual.githubcopilot.com proxy.business.githubcopilot.com proxy.enterprise.githubcopilot.com *.actions.githubusercontent.com wss://*.actions.githubusercontent.com productionresultssa0.blob.core.windows.net/ productionresultssa1.blob.core.windows.net/ productionresultssa2.blob.core.windows.net/ productionresultssa3.blob.core.windows.net/ productionresultssa4.blob.core.windows.net/ productionresultssa5.blob.core.windows.net/ productionresultssa6.blob.core.windows.net/ productionresultssa7.blob.core.windows.net/ productionresultssa8.blob.core.windows.net/ productionresultssa9.blob.core.windows.net/ productionresultssa10.blob.core.windows.net/ productionresultssa11.blob.core.windows.net/ productionresultssa12.blob.core.windows.net/ productionresultssa13.blob.core.windows.net/ productionresultssa14.blob.core.windows.net/ productionresultssa15.blob.core.windows.net/ productionresultssa16.blob.core.windows.net/ productionresultssa17.blob.core.windows.net/ productionresultssa18.blob.core.windows.net/ productionresultssa19.blob.core.windows.net/ github-production-repository-image-32fea6.s3.amazonaws.com github-production-release-asset-2e65be.s3.amazonaws.com insights.github.com wss://alive.github.com api.githubcopilot.com api.individual.githubcopilot.com api.business.githubcopilot.com api.enterprise.githubcopilot.com; font-src github.githubassets.com; form-action 'self' github.com gist.github.com copilot-workspace.githubnext.com objects-origin.githubusercontent.com; frame-ancestors 'none'; frame-src viewscreen.githubusercontent.com notebooks.githubusercontent.com; img-src 'self' data: blob: github.githubassets.com media.githubusercontent.com camo.githubusercontent.com identicons.github.com avatars.githubusercontent.com private-avatars.githubusercontent.com github-cloud.s3.amazonaws.com objects.githubusercontent.com release-assets.githubusercontent.com secured-user-images.githubusercontent.com/ user-images.githubusercontent.com/ private-user-images.githubusercontent.com opengraph.githubassets.com copilotprodattachments.blob.core.windows.net/github-production-copilot-attachments/ github-production-user-asset-6210df.s3.amazonaws.com customer-stories-feed.github.com spotlights-feed.github.com objects-origin.githubusercontent.com *.githubusercontent.com; manifest-src 'self'; media-src github.com user-images.githubusercontent.com/ secured-user-images.githubusercontent.com/ private-user-images.githubusercontent.com github-production-user-asset-6210df.s3.amazonaws.com gist.github.com; script-src github.githubassets.com; style-src 'unsafe-inline' github.githubassets.com; upgrade-insecure-requests; worker-src github.githubassets.com github.com/assets-cdn/worker/ github.com/assets/ gist.github.com/assets-cdn/worker/
server: github.com
content-encoding: gzip
accept-ranges: bytes
set-cookie: _gh_sess=KwcH8Quv%2F56IsGuTqSGsEvuqDFXaAqxH%2FlM%2BLdg1gwYHVILk5islJS6Gp1NsGMDm494MaTBvcjPpu9Q0KSKlo%2FIIFmTW6nTSHK4PU6Kbv1v2s5tVv0E%2BMm7RgXaZwyuNxGrAjxUGTXTYiUdnbJLfuPFrbs6rPRjc%2FUxjbsfpma1C5QC3we045sdCp9h7mGiN%2B7gIl%2FbwLlqxo5JJrRv1DV7%2Bj4pc0QMLEfn8CRD%2FjPkO%2Fk0dkj01YG9M8mfh89l8jxqA5zq0LmLKwQAsVesW2Q%3D%3D--GaNl1Yt08ZO8Bxpd--Yb3NM%2BFfuXfz5U9WnMxvQg%3D%3D; Path=/; HttpOnly; Secure; SameSite=Lax
set-cookie: _octo=GH1.1.840320341.1753247358; Path=/; Domain=github.com; Expires=Thu, 23 Jul 2026 05:09:18 GMT; Secure; SameSite=Lax
set-cookie: logged_in=no; Path=/; Domain=github.com; Expires=Thu, 23 Jul 2026 05:09:18 GMT; HttpOnly; Secure; SameSite=Lax
x-github-request-id: B42C:3B93B0:3D6DB3:52C5E0:68806E7E
Button Specification · IgniteUI/igniteui-angular Wiki · GitHub
Skip to content
Navigation Menu
{{ message }}
-
Notifications
You must be signed in to change notification settings - Fork 160
Button Specification
Plamen Dobrev edited this page Jan 23, 2024
·
5 revisions
The igxButton
directive should provide a way to use html elements like button, span, div or anchor like a fully functional button.
<span igxButton="raised" igxButtonColor="green" igxButtonBackground="#FFF">
Click me
<span>
- As a developer I want to be able to provide a way to use and customize button element, and use set different types.
- As a developer I want to be able to to specify a display density for the button from predefined values.
<div igxButton [displayDensity]="'compact'" [options]>Click me!</div>
- Have button with different color and background color.
- Have button with different types, like fab, gradient, flat etc.
-
igxButton
- Set the type of igxButton to be used. Default is set to flat. -
igxButtonColor
- Set the button text color. You can pass any CSS valid color value. -
igxButtonBackground
- Set the button background color. You can pass any CSS valid color value. -
buttonSelected
- Emitted not only when a button gets selected, but also when it gets deselected. -
selected
- Gets or sets whether the button is selected. Mainly used in theIgxButtonGroup
component and it will have no effect if set separately. Example:
<button type="button" igxButton="flat" [selected]="button.selected"></button>
-
igxLabel
- Sets thearia-label
attribute. Example:
<button type="button" igxButton="flat" igxLabel="Label"></button>
Button types:
-
flat
- The default button type. Transparent background and primary theme color for text. -
raised
- As the name implies, this button type uses subtle box-shadow. Primary theme color for background and white for text color. -
gradient
- Same as the raised button type. Additionally you can specify a gradient value for background color. -
fab
- Floating action button type. Circular with primary theme color for background and white text. -
icon
- This is the simplest of button types. Use it whenever you need to use an icon as button. -
navbar
- Same as the icon button type, albeit optimized for use with the igx-navbar component.
You can’t perform that action at this time.